?

眾里尋她千百度，angular directives竟然如此簡單？是個人都能懂！

大家好，這一期呢，我們來談一下angular directives。

在angular的環境中呢，有兩種directives, 一種是內置的，另外一種是自定義的。

內置的directives有*ngFor, *ngIf, ngSwitch, ngClass等等。

相信你如果在用Angular的話，對以上這些都很熟悉了。

我們重點來說一下自定義的directives。

我們要創建一個directives，我們直接用Angular的命令，像這樣ng g directive jetding。這個命令會添加一個directive文件,一個單元測試文件，然后并且把這個directive加到module里面。

在module里面就是添加一個聲明。當然你如果不喜歡用命令行的話，你也可以自己手工添加。

Directive文件本身呢，它的selector有一個方括號[appJetDing], 前面有個APP的原因是為了避免與系統一級的directive發生沖突。

@Directive({selector:"[appJetDing]"})

export class JetDingDirective{

constructor(){}

}

當然目前這個directive是空的，不做什么事情，那我們就先搭一個框架，我們來設定這個directive已經準備好了，我們建一個div的tag，在div中使用這個directive。

<div>This is a test. </div>

<div appJetDing>This is a test. </div>

好，我們再回到我們自己的directive里面去。

這里面的第一要務就是要獲取HTML的元素。獲取的方法很簡單，就像下面的代碼。在構造函數中添加元素引用的定義。

@Directive({selector:"[appJetDing]"})

export class JetDingDirective{

constructor(private el: ElementRef){}

}

一旦獲取到這個元素的實例，你就可以對這個元素進行一些操作，比如說修改顏色，字體等等屬性。

el.nativeElement.style.backgroundColor="red"

可以修改這個元素的內容。

el.nativeElement.innerText = "haha " + el.nativeElement.innerText

這一期就說這些，希望對大家有所幫助。

這里是丁哥開講，歡迎關注一起學習討論，共同進步。

十年內計劃寫出超過三千六百篇文章，與超過三萬名讀者互動。

這些文章會在今日頭條，知乎，簡書，微博，微信公眾平臺，阿里大魚號，Medium等各大平臺同步上線，敬請期待關注，歡迎洽談合作相關事宜。