Angular 11中指令的常见问题

1. 如何将指令添加到组件模板中？

指令可以通过在组件模板中使用其选择器名称来添加。例如，如果您有一个名为MyDirective的指令，并且该指令的选择器为my-directive，则可以在组件模板中使用以下方式添加：

2. 如何访问指令所属的元素？

您可以使用@HostBinding和@HostListener装饰器从指令中访问元素。@HostBinding可以用于设置元素属性，@HostListener可以用于监听元素事件。例如，以下指令将将my-directive的文本颜色设置为红色，并在单击时将文本更改为“clicked”文本：

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

@Directive({
  selector: '[my-directive]'
})
export class MyDirective {
  @HostBinding('style.color') color = 'red';

  @HostListener('click') onClick() {
    this.el.nativeElement.textContent = 'clicked';
  }

  constructor(private el: ElementRef) {}
}

3. 如何在使用*ngFor时将指令应用于每个元素？

您可以使用ngForOf和ng-template指令创建一个模板，然后在模板中使用你的指令。例如，以下指令将在使用*ngFor创建的每个元素上应用my-directive：

  
{{ item }}

4. 如何在使用*ngIf时将指令应用于元素？

您可以使用ng-template指令创建一个模板，然后在该模板中使用你的指令。然后，将ngIf指令应用于包含模板的元素。例如，以下指令将仅在参数值为true时将my-directive应用于元素：