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

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

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

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

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

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

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

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

@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');
  }
}

@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);
  }
}

@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';
}

注意事项：

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

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

猜你喜欢