Angular中的Attribute Directives如何创建和应用

Attribute Directives 在 Angular 中用于修改或添加 HTML 元素的属性。创建一个 Attribute Directive 非常简单，只需要使用 @Directive 装饰器来定义一个类，并且使用 @Input 装饰器来接收输入值。

以下是一个简单的例子：

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @Input() highlightColor: string;

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor || 'yellow';
  }
}

在这个例子中，我们创建了一个名为 HighlightDirective 的 Attribute Directive，它会将元素的背景颜色设置为输入的 highlightColor 值，如果没有输入值，则默认为黄色。然后我们可以将这个 Directive 应用在 HTML 元素上：

<p appHighlight highlightColor="cyan">Highlighted in cyan</p>

在这个例子中，我们将 HighlightDirective 应用在一个段落元素上，并且设置了 highlightColor 输入值为 cyan，这样这个段落元素的背景颜色会被设置为青色。