在 Angular 中有三種類(lèi)型的指令
- 組件 — 擁有模板的指令
- 結(jié)構(gòu)型指令 — 通過(guò)添加和移除 DOM 元素改變 DOM 布局的指令
- 屬性型指令 — 改變?cè)亍⒔M件或其它指令的外觀和行為的指令。
組件的概念比較大，本文講解的是屬性指令和結(jié)構(gòu)指令的創(chuàng)建和使用，Angular官方文檔
創(chuàng)建屬性指令
創(chuàng)建一個(gè)指令可以直接使用ionic cli 工具
ionic g directive sxylight
//sxylight 是該屬性指令的名稱(chēng)
如果是首次執(zhí)行該命令，會(huì)在 src 目錄下生成一個(gè) directives 目錄，如同時(shí)在 directives 目錄下生成 directives.module.ts 文件，該文件使用 @NgModule 注解，是一個(gè)模塊，用于統(tǒng)一自定義的指令。同時(shí)生成的還有sxylight 指令，并且 ionic cli 會(huì)自動(dòng)將指令的信息添加到 directives.module.ts 模塊中。
大概是這樣子的，只看標(biāo)記的地方，多余的東西和本文無(wú)關(guān)
image.png
sxylight.ts 就是指令的具體實(shí)現(xiàn)，代碼如下
import {Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[sxylight]'
})
export class SxylightDirective {
constructor(private el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
@Input('sxylight') highlightColor: string;
@Input() defaultColor: string;
@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;
}
}
該指令的主要功能是：當(dāng)鼠標(biāo)懸浮到使用該指令的元素上時(shí)，元素的背景色發(fā)生變化。當(dāng)鼠標(biāo)離開(kāi)時(shí)，清除背景色。
背景色的顏色可由父組件傳入。
selector: '[sxylight]' 是該指令在外部使用時(shí)的名稱(chēng)
@Input 表示一個(gè)輸入屬性，表示可以從父組件傳值進(jìn)來(lái)
@HostListener 可用于監(jiān)聽(tīng)事件
ElementRef 可以 替代dom API 獲取元素
使用屬性指令
使用自定義指令，有幾個(gè)地方需要注意：首先需要子在 directives.module.ts 文件中 導(dǎo)入和導(dǎo)出， 然后需要在你使用的模塊中導(dǎo)入。如果時(shí)使用 Ionic CLI工具創(chuàng)建的指令，directives.module.ts 已經(jīng)自動(dòng)配置好了，可以不用理會(huì)，需要的就是在別的模塊中 引入 DirectivesModule(directives.module.ts )模塊。比如，我需要在自己的 table模塊中引用這個(gè)指令，那么只需要子啊 table.module.ts中引入這個(gè)模塊即可，不需要在 app.module.ts中引入
導(dǎo)入工作做好之后，就可以直接在模板中使用該指令了
<p>自定義屬性指令</p>
<h1 [sxylight]="'cyan'" defaultColor="violet">測(cè)試自定義屬性指令</h1><br>
效果如下
初始化的時(shí)候
鼠標(biāo)懸浮之后
鼠標(biāo)離開(kāi)之后
創(chuàng)建結(jié)構(gòu)指令
ionic g directive sxyunless
sxyunless.ts 代碼如下
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[sxyunless]'
})
export class SxyunlessDirective {
private hasView = false;
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
@Input()
set sxyunless(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;
}
}
}
這里定義了與 *ngIf 功能相反的指令，即：當(dāng)條件不成立的時(shí)候才會(huì)生成對(duì)應(yīng)的 DOM
使用結(jié)構(gòu)指令
因?yàn)樵谏厦嫖覀円M(jìn)導(dǎo)入了 DirectivesModule ，而 DirectivesModule 又包含了現(xiàn)在新創(chuàng)建的這個(gè)結(jié)構(gòu)指令，因此這里不需要在 table.module.ts 中導(dǎo)入模塊了。
tables.html 關(guān)鍵代碼
<p>自定義結(jié)構(gòu)指令</p>
<h1 *sxyunless="false"> 測(cè)試自定義結(jié)構(gòu)指令 </h1><br>
測(cè)試結(jié)果如下
如果將 *sxyunless="false" 改成 *sxyunless="true"，即
<p>自定義結(jié)構(gòu)指令</p>
<h1 *sxyunless="true"> 測(cè)試自定義結(jié)構(gòu)指令 </h1><br>
則測(cè)試效果如下，該dom沒(méi)有加載
注意，結(jié)構(gòu)指令在使用的時(shí)候必須加 * ，如果不加 * ，會(huì)出問(wèn)題
例如將代碼成如下
<p>自定義結(jié)構(gòu)指令</p>
<h1 sxyunless="false"> 測(cè)試自定義結(jié)構(gòu)指令 </h1><br>
會(huì)導(dǎo)致以下錯(cuò)誤
