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

2024-01-08 18:14:21

????????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() {
      // 在事件发生时执行的方法
    }

文章来源:https://blog.csdn.net/qq_44327851/article/details/135370118
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。