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，这样这个段落元素的背景颜色会被设置为青色。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
