1. 新建一個(gè)指令
ng g directive light
打開(kāi)light.directive.ts新建的指令如下:
import { Directive } from '@angular/core';
@Directive({ // @Directive 是指令的裝飾器
selector: '[myLight]' // myLight是在模板中使用的指令名
})
export class LightDirective {
constructor() { }
}
導(dǎo)入ElementRef Input:ElementRef注入到指令構(gòu)造函數(shù)中望侈。這樣代碼就可以訪問(wèn) DOM 元素了施掏。Input將數(shù)據(jù)從綁定表達(dá)式傳達(dá)到指令中邮府。
import {Directive, ElementRef, Input} from '@angular/core';
@Directive({
selector: '[myLight]'
})
export class LightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'green';
}
}
我們就新建好了一個(gè)簡(jiǎn)單的屬性指令翘县。
2. 使用屬性指令
使用屬性指令的方式很簡(jiǎn)單彰阴，只需要將指令放到模板的html標(biāo)簽里就可以了：
<h1>My First Attribute Directive</h1>
<p myLight> 頁(yè)面不見(jiàn)鳥(niǎo)~</p>
當(dāng)然怕轿，還需要將這個(gè)指令聲明在@NgModule中:
// app.module.ts
...
@NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
LightDirective // declarations 里面可以聲明組件断傲、指令肄满、管道谴古。
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
這樣便可以在頁(yè)面中看到效果了。
3. 響應(yīng)用戶觸發(fā)事件
我們可以在代碼中添加相應(yīng)鼠標(biāo)事件的代碼：
// light.component.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myLight]'
})
export class LightDirective {
constructor(private el: ElementRef) { }
@HostListener('mouseenter') onMouseEnter() {
this.Light('green');
}
@HostListener('mouseleave') onMouseLeave() {
this.Light(null);
}
private Light(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
所以上面是看得懂的吧稠歉。
@HostListener裝飾器引用屬性型指令的宿主元素掰担，在這個(gè)例子中就是<p>。
4. 使用屬性綁定向指令中傳值
上面的例子我們已經(jīng)實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的指令怒炸，但是這樣的指令還不夠靈活带饱，我們只能指定固定的顏色，而且顏色不能改變，按照預(yù)期我們應(yīng)該是需要能夠自己指定顏色才好勺疼。這時(shí)候就用到了我們剛才導(dǎo)入的Input裝飾器教寂。
在組件中新建一個(gè)屬性用來(lái)綁定顏色：假設(shè)在AppComponent組件中：
// app.component.ts
export class AppComponent {
public color = 'green';
}
屬性綁定到模板中：
<p [myLight]="color">頁(yè)面不見(jiàn)鳥(niǎo)!</p>
還需要將這個(gè)顏色值傳入到指令中，指令才能起作用：
// light.directive.ts
@Input() myLight: string;
你可能需要設(shè)置一個(gè)默認(rèn)顏色执庐，如果忘記寫(xiě)顏色值酪耕，這時(shí)候以默認(rèn)值顯示，好吧轨淌，直接寫(xiě)完成的指令：
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class LightDirective {
constructor(private el: ElementRef) { }
@Input('myLight') highlightColor: string; // 更改傳入屬性名為一個(gè)更語(yǔ)義化的變量名迂烁，可以不用。
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || 'red'); // 指定一個(gè)默認(rèn)顏色
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
5. 綁定第二個(gè)屬性
一般到這里你再也看不下去了递鹉，因?yàn)橹噶钜呀?jīng)寫(xiě)好了婚被，心情比較浮躁。但是我還是寫(xiě)了梳虽。
實(shí)現(xiàn)的方式是相同的址芯，我們這里只是手動(dòng)指定了一個(gè)默認(rèn)默認(rèn)顏色，那么這個(gè)默認(rèn)顏色要由用戶來(lái)指定呢窜觉？
好谷炸，按照上面的方式再寫(xiě)一個(gè)屬性defaultColor，然后用到模板中：
<p [myLight]="color" defaultColor="violet"> <!-- 顏色直接寫(xiě)死在這里了禀挫，你自己來(lái)改 -->
頁(yè)面不見(jiàn)鳥(niǎo)~
</p>
指令中再修改一下：
// light.directive.ts
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || this.defaultColor || 'red');
}
6. 獲取宿主元素的屬性值
在指令中旬陡，通過(guò)Attribute裝飾器來(lái)獲取宿主元素的屬性值。
指令寫(xiě)法：
import { Directive, HostBinding, HostListener, Input, Attribute } from '@angular/core';
// ...
// constructor 中我們使用 @Attribute裝飾器來(lái)獲取宿主元素(p)的屬性(hero)
constructor(el: ElementRef, @Attribute('hero') public hero: string) {
el.nativeElement.style.backgroundColor = 'green';
console.log(this.hero);
}
模板中我們也做適當(dāng)?shù)男薷模?/p>
<p myLight hero="Big Keriy!"> <!-- 加上hero屬性 -->
頁(yè)面不見(jiàn)鳥(niǎo)~
</p>
hero屬性的寫(xiě)法有兩種方式语婴，當(dāng)?shù)忍?hào)右邊為變量時(shí)使用[hero]這種形式描孟。為固定值的時(shí)候，看上面砰左。
