?知識普及

Angular 指令根據其創建形式分為內置指令和自定義指令，指令按照類型分：
模板指令——組件就是模板指令（只能自定義）
屬性型指令?—— 更改元素、組件或其他指令的外觀或行為的指令（有內置和自定義兩類）
結構型指令?—— 通過添加和刪除 DOM 元素來更改 DOM 布局的指令（有內置和自定義兩類）

舉例：

內置屬性型指令常用的有：
NgClass —— 添加和刪除一組 CSS 類
NgStyle —— 添加和刪除一組 HTML 樣式
NgModel —— 將數據雙向綁定添加到 HTML 表單元素

內置結構型指令常用的有：
NgIf —— 從模板中創建或銷毀子視圖
NgFor —— 為列表中的每個條目重復渲染一個節點
NgSwitch —— 一組在備用視圖之間切換的指令

---

本節我們主要介紹如何自定義創建模板指令、屬性型指令、結構型指令

1、創建自定義模板指令（組件）

ng g c <component-name>

?默認情況下，該命令會創建以下內容：
一個以該組件命名的文件夾
一個組件文件?<component-name>.component.ts
一個模板文件<component-name>.component.html
一個CSS文件<component-name>.component.css
測試文件<component-name>.component.spec.ts
其中<component-name>?是組件的名稱。由于組件超級簡單，這里就不展開模板組件的細節了。

---

2、創建自定義屬性型指令

ng g d <directive-name>

?例如使用 ng g d dir就會創建一個dir.directive.ts文件

import { Directive, ElementRef } from '@angular/core';
@Directive({selector: '[changeYellowBackgroundColor]'//這個指令名可以自己修改
})
export class DirDirective {constructor(el: ElementRef) {el.nativeElement.style.backgroundColor = 'yellow';//背景色修改為黃色}
}

app.component.html?

<h1 changeYellowBackgroundColor>指令用于改變文本背景色 </h1>

渲染效果?

上面dir.directive.ts代碼中的[changeYellowBackgroundColor]可以修改為[changeYellowBackgroundColor=yellow]，這樣在html里面使用指令就必須要寫changeYellowBackgroundColor="yellow"

<h1 changeYellowBackgroundColor="yellow">指令用于改變文本背景色 </h1>

---

?OK！上面這個騷操作知識入門級，接下來我們研究下如何處理用戶事件，將dir.directive.ts修改為：

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({selector: '[changeYellowBackgroundColor]'//這個指令名可以自己修改
})
export class DirDirective {constructor(private el: ElementRef) { }@HostListener('mouseenter') onMouseEnter() {this.el.nativeElement.style.backgroundColor = 'yellow';}@HostListener('mouseleave') onMouseLeave() {this.el.nativeElement.style.backgroundColor = '';}}

然后渲染效果如下?

---

步步為營，我們怎么能止步于這種簡單玩法，搞點高級的——將值傳遞給屬性型指令，讓指令能夠接收外部的參數值，就如同組件的input參數一樣，看代碼↓

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({selector: '[changeYellowBackgroundColor]'//這個指令名可以自己修改
})
export class DirDirective {constructor(private el: ElementRef) { }@Input() changeYellowBackgroundColor = '';//外部傳參@Input() defaultColor = 'gray';//外部傳參（默認顏色）@HostListener('mouseenter') onMouseEnter() {this.el.nativeElement.style.backgroundColor = this.changeYellowBackgroundColor || this.defaultColor;}@HostListener('mouseleave') onMouseLeave() {this.el.nativeElement.style.backgroundColor = '';}}

?app.component.html

<h1 changeYellowBackgroundColor='red'>指令用于改變文本背景色（紅色） </h1>
<h1 changeYellowBackgroundColor='orange'>指令用于改變文本背景色（橙色） </h1>
<h1 changeYellowBackgroundColor='yellow'>指令用于改變文本背景色（黃色） </h1>
<h1 changeYellowBackgroundColor defaultColor='gray'>指令用于改變文本背景色（默認灰色） </h1>

?渲染效果

---

?3、創建自定義結構型指令

讓我們試試如何實現*ngIf的功能

dir.directive.ts

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({selector: '[if]'//這個指令名可以自己修改
})
export class DirDirective {constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) { }@Input() set if(condition: boolean) {condition ? this.viewContainer.createEmbeddedView(this.templateRef) : this.viewContainer.clear();}
}

?app.component.html

<p>實現類似*ngIf的功能</p>
<h1 *if="condition" style="color:red;">當表達式condition的值為true的時候顯示這句</h1>
<h1 *if="!condition" style="color:orange;">當表達式condition的值為false的時候顯示這句</h1>
<button (click)="condition = !condition">切換顯示if內容，condition變為{{condition}}</button>

?app.component.ts

…condition=true;…

?渲染效果

總結

以上是生活随笔為你收集整理的浅谈Angular如何自定义创建指令@Directive的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。