Angular 中的自定义指令

指令可以扩展 HTML 的功能。本课将介绍自定义指令，以及如何创建自己的指令。

什么是指令？

指令可以改变 DOM 元素的外观或行为。Angular 提供了 *ngIf 和 *ngFor 等内置指令。

指令的类型

• 组件指令
• 属性指令 - 改变外观或行为
• 结构型指令 - 改变布局（例如 *ngIf）

创建属性指令

使用 Angular CLI 创建指令：

ng generate directive highlight

ng generate directive highlight

应用指令

在模板中将指令作为属性使用：

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

指令逻辑

指令包含用于改变 DOM 元素的逻辑。例如，您可以动态设置背景颜色。

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

@HostListener 装饰器

使用 @HostListener 响应带有您指令的元素上的事件：

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

指令中的 @Input()

@Input() 可以让您从模板向指令传入数据：

@Input() defaultColor: string;

总结

您已经学习了如何创建和使用自定义指令来增强 Angular 应用。做得很好！