在 Angular 中有三種類型的指令
- 組件 — 擁有模板的指令
- 結(jié)構(gòu)型指令 — 通過添加和移除 DOM 元素改變 DOM 布局的指令
- 屬性型指令 — 改變元素、組件或其它指令的外觀和行為的指令窗声。
組件的概念比較大肛走，本文講解的是屬性指令和結(jié)構(gòu)指令的創(chuàng)建和使用损合，Angular官方文檔
創(chuàng)建屬性指令
創(chuàng)建一個指令可以直接使用ionic cli 工具
ionic g directive sxylight
//sxylight 是該屬性指令的名稱
如果是首次執(zhí)行該命令亚再，會在 src 目錄下生成一個 directives 目錄岭粤，如同時在 directives 目錄下生成 directives.module.ts 文件，該文件使用 @NgModule 注解派昧，是一個模塊黔姜，用于統(tǒng)一自定義的指令。同時生成的還有sxylight 指令蒂萎，并且 ionic cli 會自動將指令的信息添加到 directives.module.ts 模塊中秆吵。
大概是這樣子的，只看標記的地方五慈，多余的東西和本文無關
image.png
sxylight.ts 就是指令的具體實現(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;
}
}
該指令的主要功能是：當鼠標懸浮到使用該指令的元素上時主穗，元素的背景色發(fā)生變化。當鼠標離開時烈疚，清除背景色黔牵。
背景色的顏色可由父組件傳入。
selector: '[sxylight]' 是該指令在外部使用時的名稱
@Input 表示一個輸入屬性爷肝，表示可以從父組件傳值進來
@HostListener 可用于監(jiān)聽事件
ElementRef 可以 替代dom API 獲取元素
使用屬性指令
使用自定義指令猾浦，有幾個地方需要注意：首先需要子在 directives.module.ts 文件中 導入和導出， 然后需要在你使用的模塊中導入灯抛。如果時使用 Ionic CLI工具創(chuàng)建的指令金赦，directives.module.ts 已經(jīng)自動配置好了，可以不用理會对嚼，需要的就是在別的模塊中 引入 DirectivesModule(directives.module.ts )模塊夹抗。比如，我需要在自己的 table模塊中引用這個指令纵竖，那么只需要子啊 table.module.ts中引入這個模塊即可漠烧，不需要在 app.module.ts中引入
導入工作做好之后，就可以直接在模板中使用該指令了
<p>自定義屬性指令</p>
<h1 [sxylight]="'cyan'" defaultColor="violet">測試自定義屬性指令</h1><br>
效果如下
初始化的時候
鼠標懸浮之后
鼠標離開之后
創(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 功能相反的指令靡砌，即：當條件不成立的時候才會生成對應的 DOM
使用結(jié)構(gòu)指令
因為在上面我們引進導入了 DirectivesModule 已脓，而 DirectivesModule 又包含了現(xiàn)在新創(chuàng)建的這個結(jié)構(gòu)指令，因此這里不需要在 table.module.ts 中導入模塊了通殃。
tables.html 關鍵代碼
<p>自定義結(jié)構(gòu)指令</p>
<h1 *sxyunless="false"> 測試自定義結(jié)構(gòu)指令 </h1><br>
測試結(jié)果如下
如果將 *sxyunless="false" 改成 *sxyunless="true"度液，即
<p>自定義結(jié)構(gòu)指令</p>
<h1 *sxyunless="true"> 測試自定義結(jié)構(gòu)指令 </h1><br>
則測試效果如下，該dom沒有加載
注意画舌，結(jié)構(gòu)指令在使用的時候必須加 * 堕担，如果不加 * ，會出問題
例如將代碼成如下
<p>自定義結(jié)構(gòu)指令</p>
<h1 sxyunless="false"> 測試自定義結(jié)構(gòu)指令 </h1><br>
會導致以下錯誤
