1. 指令：
在 Angular 中有三种类型的指令：
组件 — 拥有模板的指令。
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令。
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
组件是这三种指令中最常用的。
结构型指令修改视图的结构。例如，NgFor、NgIf、NgSwitch。要了解更多，参见结构型指令 。
属性型指令改变一个元素的外观或行为。例如，内置的 NgStyle指令可以同时修改元素的多个样式。
2. 宿主元素（host element）
了解指令前，我们需要先理解宿主元素。对于指令来说，这个概念是相当简单的。应用指令的元素，就是宿主元素。如下文绑定自定义结构型指令的P标签就是宿主元素。
3. 自定义结构型指令
- 创建指令
composition.directive.ts
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
@Directive({
selector: '[appComposition]'
})
export class CompositionDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { }
@Input()
set appComposition (c: boolean) {
if (!c) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
- 使用指令
- 在组件所属模块
declarations中导入
declarations: [
AppComponent,
CompositionDirective
],
- 模板中使用
<p *appComposition="false">当appComposition为false时出现这段话</p>
or
<ng-template [appComposition]="false">
<p>当appComposition为false时出现这段话</p>
</ng-template>
- 注意：
a. 我们可以使用TemplateRef取得宿主元素的内容，并通过ViewContainerRef来访问这个视图容器。
b. 使用@Input()，通过setter截听输入属性值的变化，设置内嵌视图。
c. 当appComposition为false，调用ViewContainerRef类实例的createEmbeddedView方法创建内嵌视图
4. 自定义属性指令
- 创建指令
height-light.directive.ts
import {Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[appHeightLight]'
})
export class HeightLightDirective {
public default = 'yellow'
@Input('appHeightLight') light: string
constructor(
private el: ElementRef,
private ren: Renderer2
) { }
@HostListener('mouseenter') onMouseEnter () {
console.log(this.el)
this.el.nativeElement.style.backgroundColor = this.light;
this.ren.setStyle(this.el.nativeElement, 'fontSize', '20px');
}
@HostListener('mouseleave') onMouseLeave () {
this.el.nativeElement.style.backgroundColor = this.default;
}
}
- 使用指令
- 在组件所属模块
declarations中导入
declarations: [
AppComponent,
HeightLightDirective
],
- 模板中使用
<p [appHeightLight]="'blue'">Highlighted in blue</p>
or
<p appHeightLight="orange">Highlighted in orange</p>
-
注意：
a.HostListener是属性装饰器，用来为宿主元素添加事件监听。
b.HostBinding是属性装饰器，用来动态设置宿主元素的属性值。
c. Angular 会为每个匹配的元素创建一个指令控制器类的实例，并把 Angular 的ElementRef和Renderer注入进构造函数。ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。Renderer服务允许通过代码设置元素的样式。
