站長資訊網(wǎng)
Angular指令分為三種，組件（帶模板指令）、結(jié)構(gòu)型指令（改變宿主文檔結(jié)構(gòu)）、屬性型指令（改變宿主行為），下面主要介紹自定義結(jié)構(gòu)型指令和自定義屬性型指令。
一、自定義結(jié)構(gòu)型指令
一個(gè)元素上只能放一個(gè)結(jié)構(gòu)型指令，結(jié)構(gòu)型指令的書寫形式為*指令名，*是一個(gè)語法糖，如下代碼：
<div *ngIf=""></div> <!-- 等價(jià)于 --> <ng-template [ngIf]=""> <div></div> </ng-template>
登錄后復(fù)制
以下自定義一個(gè)結(jié)構(gòu)型指令，當(dāng)給指令輸入superadmin和admin時(shí)，DOM節(jié)點(diǎn)顯示，否則移除節(jié)點(diǎn)?！鞠嚓P(guān)教程推薦：《angular教程》】
@Directive({ selector: '[appLogin]' }) export class LoginDirective implements OnInit{ @Input('appLogin') user="" constructor(private VCR: ViewContainerRef,private TPL: TemplateRef<any>) { //在指令的構(gòu)造函數(shù)中將 TemplateRef 和 ViewContainerRef 注入成私有變量。 } ngOnInit(){ if(this.user=='superadmin'||this.user=="admin"){ this.VCR.createEmbeddedView(this.TPL) }else{ this.VCR.clear() } } }
登錄后復(fù)制
<div *appLogin="'superadmin'">超級(jí)管理員</div> <div *appLogin="'admin'">管理員</div> <div *appLogin="'user'">普通會(huì)員</div>
登錄后復(fù)制
效果：
二、自定義屬性型指令
使用屬性型指令，可以更改 DOM 元素和 Angular 組件的外觀或行為。
1、從 @angular/core 導(dǎo)入 ElementRef。ElementRef 的 nativeElement 屬性會(huì)提供對(duì)宿主 DOM 元素的直接訪問權(quán)限。
2、在指令的 constructor() 中添加 ElementRef 以注入對(duì)宿主 DOM 元素的引用，該元素就是 appColor 的作用目標(biāo)。
3、向 ColorDirective 類中添加邏輯，在不同輸入條件下，背景分別展現(xiàn)為紅、綠、藍(lán)
@Directive({ selector: '[appColor]' }) export class ColorDirective implements OnInit{ @Input() appColor="" constructor(private ele:ElementRef) { } ngOnInit(){ if (this.appColor == 'superadmin'){ this.ele.nativeElement.style.backgroundColor="red" } else if (this.appColor == 'admin') { this.ele.nativeElement.style.backgroundColor = "green" }else{ this.ele.nativeElement.style.backgroundColor = "blue" } } }
登錄后復(fù)制
<div [appColor]="'superadmin'">超級(jí)管理員</div> <div [appColor]="'admin'">管理員</div> <div [appColor]="'user'">普通會(huì)員</div>**
登錄后復(fù)制
效果：
