在 Angular 中有三种类型的指令：
组件 — 拥有模板的指令
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
属性型指令：
1.初始化
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
color: string; //声明变量color，页面绑定的变量
}
2.模块声明指令
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive'; //引入插件
@NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
HighlightDirective//引入插件
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
3.创建指令
/* tslint:disable:member-ordering */
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'//css属性选择器
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@Input() defaultColor: string; //声明属性
@Input('appHighlight') highlightColor: string;//声明属性别名appHighlight
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || this.defaultColor || 'red');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
4.调用指令
<h1>My First Attribute Directive</h1>
<h4>Pick a highlight color</h4>
<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>
<p [appHighlight]="color" defaultColor="violet">
Highlight me too!
</p>
结构型指令
一个元素上只能放一个结构型指令
<ng-container></ng-container>没有任何表现的父层
<ng-template></ng-template>内容变为注释
创建步骤：
1.导入Directive装饰器（而不再是Component）。
2.导入符号Input、TemplateRef和ViewContainerRef，你在任何结构型指令中都会需要它们。
3.给指令类添加装饰器。
4.设置 CSS属性选择器，以便在模板中标识出这个指令该应用于哪个元素。
1.创建组件
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[appUnless]'}) //用属性设置样式
export class UnlessDirective {
private hasView = false;
constructor(
private templateRef: TemplateRef, //组件的html模版
private viewContainer: ViewContainerRef) { } //组件的容器
@Input() set appUnless(condition: boolean) {
if (!condition && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef); //放入容器中
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear(); //销毁本容器中的所有视图
this.hasView = false;
}
}
}
2.初始化
import { UnlessDirective } from './unless.directive';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [
AppComponent,
UnlessDirective
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
3.页面调用
<p *appUnless="condition">Show this sentence unless the condition is true.</p>
你可以根据属性名在绑定中出现的位置来判定是否要加 @Input。
当它出现在等号右侧的模板表达式中时，它属于模板所在的组件，不需要 @Input装饰器。
当它出现在等号左边的方括号（[ ]）中时，该属性属于其它组件或指令，它必须带有 @Input装饰器。
