在angular中有三种类型的指令:
组件–拥有模板的指令;
结构性指令–通过添加和移除DOM元素改变DOM布局的指令;
属性型指令–改变元素、组件或其他指令的外观和行为的指令;
组件是这三种指令中最常用的。结构性指令修改视图的结构,例如ngfor和ngif。属性型指令改变一个元素的外观或行为。
属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。
比如定义一个名为“highlight”的属性型指令:
在cmd的命令窗口里面执行命令:ng generate directive highlight
生成的 src/app/highlight.directive.ts 文件如下:
import { Directive } from @angular/core;
@Directive({
selector: [appHighlight]
})
export class HighlightDirective {
constructor() { }
}
View Code
这里导入的 Directive 符号提供了 Angular 的 @Directive 装饰器。
@Directive 装饰器的配置属性中指定了该指令的 CSS 属性型选择器 [appHighlight]
这里的方括号([])表