angular 绑定自定义属性_angular自定义属性指令

在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]

这里的方括号([])表