分類
組件：帶有模版的指令
屬性型指令：更改元素、組件或其他指令的外觀或行為的指令。
結(jié)構(gòu)型指令：通過添加和刪除 DOM 元素來更改 DOM 布局的指令
內(nèi)置屬性型指令
- ngClass
- ngStyle
- ngModel：NgModel 指令適用于 ControlValueAccessor 支持的元素。Angular 為所有基本 HTML 表單元素提供了值訪問器。
內(nèi)置結(jié)構(gòu)型指令
每個(gè)元素只能應(yīng)用一個(gè)結(jié)構(gòu)型指令。
- *ngFor
trackBy: 如果沒有 trackBy 則，每次 angular 都會(huì)重新渲染列表中的所有元素；如果有了 trackBy，則只會(huì)重新渲染 trackBy 跟蹤的屬性變化的元素。用于性能優(yōu)化
- *ngIf
ngIf 為假值時(shí)，則 Angular 將從 DOM 中移除一個(gè)元素及其后代。然后，Angular 會(huì)銷毀其組件，從而釋放內(nèi)存和資源。
-
ngSwitch
NgSwitch 是一組指令（共三個(gè)）：NgSwitch 會(huì)根據(jù)切換條件顯示幾個(gè)可能的元素中的一個(gè)。
NgSwitch —— 一個(gè)屬性型指令，它更改其伴生指令的行為。
NgSwitchCase —— 結(jié)構(gòu)型指令，當(dāng)其綁定值等于開關(guān)值時(shí)將其元素添加到 DOM 中，而在其不等于開關(guān)值時(shí)將其綁定值移除。
NgSwitchDefault —— 結(jié)構(gòu)型指令，當(dāng)沒有選中的 NgSwitchCase 時(shí)，將其宿主元素添加到 DOM 中。
編寫一個(gè)屬性型指令
- 基本的屬性型指令
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[appHighlight]"
})
export class HighlightDirective {
// 在指令的 constructor() 中添加 ElementRef 以注入對(duì)宿主 DOM 元素的引用，該元素就是 appHighlight 的作用目標(biāo)。
constructor(el: ElementRef) {
// ElementRef 的 nativeElement 屬性會(huì)提供對(duì)宿主 DOM 元素的直接訪問權(quán)限。
el.nativeElement.style.backgroundColor = "yellow";
}
}
- 使用
<h3 appHighlight>高亮</h3>
- 事件監(jiān)聽 @HostListener
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({
selector: "[appHighlight]"
})
export class HighlightDirective {
@HostListener("mouseenter") onMouseEnter() {
this.highlight("yellow");
}
@HostListener("mouseleave") onMouseLeave() {
this.highlight("");
}
public el: ElementRef;
constructor(el: ElementRef) {
this.el = el;
}
public highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
- 設(shè)置輸入屬性
import { Directive, ElementRef, HostListener, Input } from "@angular/core";
@Directive({
selector: "[appHighlight]"
})
export class HighlightDirective {
@HostListener("mouseenter") onMouseEnter() {
this.highlight("yellow");
}
@HostListener("mouseleave") onMouseLeave() {
this.highlight("");
}
@Input() defaultColor = "";
public el: ElementRef;
constructor(el: ElementRef) {
this.el = el;
}
public highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
<h3 appHighlight defaultColor="red">英語練習(xí)題庫(kù)</h3>
通過 NgNonBindable 停用 Angular 處理過程
要防止在瀏覽器中進(jìn)行表達(dá)式求值，請(qǐng)將 ngNonBindable 添加到宿主元素。ngNonBindable 會(huì)停用模板中的插值、指令和綁定。
在下面的示例中，表達(dá)式 {{ 1 + 1 }} 的渲染方式會(huì)和在代碼編輯器的一樣，而不會(huì)顯示 2。
<p>Use ngNonBindable to stop evaluation.</p>
<p ngNonBindable>This should not evaluate: {{ 1 + 1 }}</p>
將 ngNonBindable 應(yīng)用于元素將停止對(duì)該元素的子元素的綁定。但是，ngNonBindable 仍然允許指令在應(yīng)用 ngNonBindable 的元素上工作。
如果將 ngNonBindable 應(yīng)用于父元素，則 Angular 會(huì)禁用該元素的子元素的任何插值和綁定，例如屬性綁定或事件綁定。
編寫結(jié)構(gòu)型指令
import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
@Directive({
selector: "[appUnless]"
})
export class UnlessDirective {
@Input() set appUnless(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;
}
}
public hasView = false;
// UnlessDirective 會(huì)通過 Angular 生成的 <ng-template> 創(chuàng)建一個(gè)嵌入的視圖
// 然后將該視圖插入到該指令的原始 <p> 宿主元素緊后面的視圖容器中。
// TemplateRef可幫助你獲取 <ng-template> 的內(nèi)容，而 ViewContainerRef 可以訪問視圖容器。
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {}
}
使用
<p *appUnless="condition" class="unless a">
(A) This paragraph is displayed because the condition is false.
</p>
<ng-template [appUnless]="condition">
<p class="unless a">
(A) This paragraph is displayed because the condition is false.
</p>
</ng-template>
結(jié)構(gòu)型指令（例如 _ngIf）上的星號(hào) _ 語法是 Angular 解釋為較長(zhǎng)形式的簡(jiǎn)寫形式。 Angular 將結(jié)構(gòu)型指令前面的星號(hào)轉(zhuǎn)換為圍繞宿主元素及其后代的 <ng-template>。
用 <ng-template> 創(chuàng)建模板片段
Angular 的 <ng-template> 元素定義了一個(gè)默認(rèn)情況下不渲染任何內(nèi)容的模板。使用 <ng-template> ，你可以手動(dòng)渲染內(nèi)容，以完全控制內(nèi)容的顯示方式。
如果沒有結(jié)構(gòu)型指令，并且將某些元素包裝在 <ng-template> 中，則這些元素會(huì)消失。
