Angular中的装饰器有哪些？怎么用？

????????Angular中有一些非常有用的装饰器，用于增强指令、组件等功能。以下是一些常用的装饰器：

1. @HostBinding：用于绑定宿主元素的属性。可以通过该装饰器将指令或组件中的属性值绑定到宿主元素上。

   import { Component, HostBinding } from '@angular/core';
   
   @Component({
     selector: 'app-example',
     template: '<p>Example Component</p>'
   })
   export class ExampleComponent {
     @HostBinding('style.color') color = 'red';
   }
   

2. @Input：用于接收父组件传递的数据。通过该装饰器可以将父组件中的数据传递给子组件的属性。

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'app-child',
     template: '<p>{{inputValue}}</p>'
   })
   export class ChildComponent {
     @Input() inputValue: string;
   }
   

3. @Output：用于向父组件发送事件。通过该装饰器可以定义一个事件，并在子组件中触发该事件，以便通知父组件。

   import { Component, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'app-child',
     template: '<button (click)="sendMessage()">Send Message</button>'
   })
   export class ChildComponent {
     @Output() messageEvent = new EventEmitter<string>();
   
     sendMessage() {
       this.messageEvent.emit('Message from child component');
     }
   }
   

4. @ViewChild：用于获取对子组件或DOM元素的引用。通过该装饰器可以在父组件中获取对子组件或DOM元素的引用，以便进行操作。

   import { Component, ViewChild, ElementRef } from '@angular/core';
   
   @Component({
     selector: 'app-parent',
     template: '<div #childDiv>Child Div</div>'
   })
   export class ParentComponent {
     @ViewChild('childDiv') childDiv: ElementRef;
     
     ngAfterViewInit() {
       console.log(this.childDiv.nativeElement.textContent);
     }
   }
   

5. @ContentChild：用于获取对投影内容中的子组件或DOM元素的引用。通过该装饰器可以在父组件中获取对投影内容中的子组件或DOM元素的引用。xiamian

   import { Component, ContentChild, ElementRef } from '@angular/core';
   
   @Component({
     selector: 'app-parent',
     template: '<ng-content></ng-content>'
   })
   export class ParentComponent {
     @ContentChild('contentChild') contentChild: ElementRef;
   
     ngAfterContentInit() {
       console.log(this.contentChild.nativeElement.textContent);
     }
   }
   

接下来将着重介绍@HostListener：

概念：

????????HostListener是Angular中的一个装饰器，用于监听宿主元素上的事件，并在事件发生时执行相应的方法。它可以用来监听DOM事件、指令事件、自定义事件等。

使用语法：

? ? ? ?其中?event是要监听的事件名称，可以是任何合法的DOM事件名称，如click、mouseover等。$event是可选参数，用于传递事件对象给方法。

@HostListener('event', ['$event'])
methodName(event: Event) {
  // 在事件发生时执行的方法
}

使用场景：

????????@HostBinding 装饰器用于将属性绑定到宿主元素上。在使用 @HostBinding 装饰器时，它会自动将属性绑定到指令或组件的宿主元素上。它不需要显式地确认宿主元素，而是会自动将绑定的属性应用到宿主元素上。

????????例如，如果我们有一个指令或组件，并在该指令或组件中使用 @HostBinding 装饰器来绑定样式属性，那么这些样式属性将会自动应用到该指令或组件的宿主元素上。

? ? ? ? 示例一：在下面的示例中，我们创建了一个指令，并使用 @HostBinding 装饰器将 color 属性绑定到宿主元素的样式颜色上。当这个指令被应用到一个元素上时，该元素的文本颜色会自动变为红色，因为 color 属性被绑定到了宿主元素的样式颜色上。

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[appExampleDirective]'
})
export class ExampleDirective {
  @HostBinding('style.color') color = 'red';
}

????????示例二：在下面例子中，我们创建了一个名为ExampleComponent的组件，并使用@HostBinding装饰器将color属性绑定到组件的宿主元素的样式颜色上。因此，当这个组件被渲染时，它的宿主元素（即组件本身）的文本颜色会自动变为蓝色，因为color属性被绑定到了宿主元素的样式颜色上。

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>',
  styles: ['p { font-size: 20px; }']
})
export class ExampleComponent {
  @HostBinding('style.color') color = 'blue';
}

注意事项：

1. 方法名必须与HostListener装饰器中的方法名一致。
2. 方法参数中可以传入事件对象$event，用于获取事件的相关信息。
3. 如果要监听多个事件，可以使用多个HostListener装饰器，或者在一个HostListener中传入多个事件名称。
4. 如果在使用HostListener装饰器的时候传递了可选参数，那在监听的事件中必须书写这个参数，不然会报类似于0 params required, but got 1的错误。像下面的这种写法就会报这种错误：

   @HostListener('event', ['$event'])
   mouseUp() {
     // 在事件发生时执行的方法
   }