Angular复习笔记5-指令
在Angular中，指令是一个重要的概念，它作用在特定的DOM元素上，可以扩展这个元素的功能，为元素增加新的行为。本质上，组件可以被理解为一种带有视图的指令。组件继承自指令，是指令的一个子类，通常被用来构造UI控件。
指令的使用并不复杂，它与HTML元素属性的使用方式相似。不同的是，HTML语法标准为HTML元素预定义了特定的属性，浏览器遵循这一语法标准，实现了这些属性的内置行为。语法标准预定义的属性是有限的、不可扩展的，而Angular中的指令是可自定义的、可任意扩展的，这在一定程度上弥补了标准HTML元素属性功能的不足。
指令分类
在angular中指令分为三类：属性型指令，结构型指令和组件。
属性型指令
顾名思义，属性指令是以元素属性的形式来使用的指令。与HTML元素的内置属性不同，指令是Angular对HTML元素属性的扩展，浏览器本身不能识别这些指令，指令仅在Angular环境中才能被识别使用。属性指令通常被用来改变元素的外观和行为，如在第7章中介绍过的Angular内置指令NgStyle，它可以基于组件的状态来动态设置目标元素的样式。
结构型指令
结构指令可以用来改变DOM树的结构。结构指令可以根据模板表达式的值，增加或删除DOM元素，从而改变DOM的布局。结构指令与属性指令的使用方式相同，都是以元素属性的形式来使用的。两者的区别在于使用场景不同，属性指令用来改变元素的外观和行为，而结构指令用来改变DOM树的结构。
以Angular内置的结构指令NgIf为例，使用NgIf指令需要为指令绑定一个表达式，当表达式值为true时，该DOM元素及其子元素被添加至DOM中；当表达式值为false时，元素从DOM中被移除。示例代码如下：
上面的代码当condition的值为true时会显示p元素，反之p元素会从DOM中移除。
组件
组件继承自指令，它的代码结构与指令也是相似的，不同之处在于组件有一个自描述的模板，并且组件是用@Component来修饰，而指令需要一个宿主元素，用@Directive来描述。
组件与指令的部分生命周期钩子函数相同：
尽管组件与指令有相似的结构和一些相同的生命周期钩子方法，但是它们也有一些不同点。不同于属性指令和结构指令，组件不是以HTML元素属性的形式使用的，而是以自定义标签的形式使用的，原因在于组件带有模板。组件可作为对HTML元素的扩展，将自身的模板视图插入DOM中；而属性指令和结构指令是对HTML元素属性的扩展，其作用是扩展已有DOM元素的行为和样式，或者改变这些元素在DOM中的结构。
自定义属性型指令
一个属性指令需要一个控制器类，该控制器类使用@Directive装饰器来装饰。@Directive装饰器指定了用以标记指令所关联属性的选择器，控制器类则实现了指令所对应的特定行为。
首先需要从@angular/core中引入Directive和ElementRef。前者包含了修饰指令的装饰器@Directive，后者通过指令的构造函数传入，代表指令修饰的DOM元素宿主。
@Directive({
selector: '[appFirst]'
})
export class FirstDirective implements OnInit {
constructor(el: ElementRef) { }
ngOnInit(): void {
}
}
上面的代码便是创建了一个指令，我们需要在@Directive中定义这个指令的选择器，选择器的规则遵循CSS选择器标准，例如上面的选择器是[appFirst],表示该指令会以属性的方式附着在元素上面。
Angular会为每一个匹配的DOM元素创建一个指令实例，同时将ElementRef作为参数注入到控制器构造函数。使用ElementRef服务，可以在代码中通过其nativeElement属性直接访问DOM元素，这样就可以通过DOM API设置元素的背景色：
@Directive({
selector: '[appFirst]'
})
export class FirstDirective implements OnInit {
constructor(private el: ElementRef) { }
ngOnInit(): void {
console.log(this.el);
this.el.nativeElement.style.backgroundColor = 'red';
}
}
为指令绑定输入
在上述的代码中指令为宿主设置的颜色是固定的，如果要想动态的变更颜色，有两个思路：
第一，设置一个@Input输入属性，并将这个属性定义为set函数：
@Directive({
selector: '[appFirst]'
})
export class FirstDirective {
@Input() set backgroundColor(color: string) {
if (color) {
this.el.nativeElement.style.backgroundColor = color;
}
}
constructor(private el: ElementRef) { }
}
第二，指令实现onChanges接口，在接口中处理逻辑：
@Directive({
selector: '[appFirst]'
})
export class FirstDirective implements OnChanges {
@Input() backgroundColor: string;
ngOnChanges(changes: SimpleChanges): void {
this.el.nativeElement.style.backgroundColor = this.backgroundColor;
}
constructor(private el: ElementRef) { }
}
然后在宿主中使用这个指令：
<p appFirst [backgroundColor]="color" matLine>template</p>
在宿主中需要定义一个color变量并且改变这个color变量的值，这里就不演示了。
响应用户操作
可以使用@HostListener来响应用户发出的事件。@HostListener指向使用指令的DOM元素，使得DOM元素的事件与指令关联起来。@HostListener是另一种动态设置的方案，相比较前面那种@Input set输入属性的方式还有生命周期钩子的方式，这种方式是从响应用户发出的事件的角度执行的。
//.....其他代码....
@HostListener('click')
onClick(){
//.....代码逻辑....
}
自定义结构型指令
不同于属性型指令，属性型指令会在构造函数中传入一个ElementRef来表示它的宿主DOM元素，而结构型指令需要在构造器中传入两个参数，一个是TempleteRef,另一个是ViewContainerRef.这是因为被结构型指令修饰的DOM元素会被angular转译成一个<ng-temeplate>元素：
<span *ngIf="condition">can you see it?</span>
上面的代码会被angular转译为：
<ng-temeplate [ngIf]="condition">
<span>can you see it?</span>
</ng-template>
可以看出结构型指令会被转译成一个属性型的指令。
所以，结构型指令需要传入一个TemeplateRef的服务来访问到这个组件模板（被转译成的ng-template）。至于另一个ViewContainerRef，这个服务是可以从DOM中创建或者删除一个TemplateRef所代表的模板元素，要取决于对结构型指令求值的boolean值（因为给结构型指令绑定的表达式必须是一个boolean类型的表达式）。
下面代码简单定义了一个结构型的指令：
@Directive({
selector: '[appFirst]'
})
export class FirstDirective {
constructor(templ: TemplateRef<any>, container: ViewContainerRef) { }
@Input() condition: boolean;
}
看起来和属性型的指令差不多，不同之处在于构造函数传入的参数类型不同。使用上也和属性型指令差不多，需要注意的就是ViewContainerRef的两个方法，这两个方法都是用来操作指令中的TemplateRef所指向的模板的：
createEmbeddedView()：需要传入一个TemplateRef类型的参数，表示根据TemplateRef创建一个内嵌的视图模板。
clear()：将TemplateRef视图模板中删除。