Angular 指令的不同類型如下：

• 組件 —— 帶有模板的指令。這種指令類型是最常見的指令類型。
• 屬性型指令 —— 更改元素、組件或其他指令的外觀或行為的指令。
• 結(jié)構(gòu)型指令 —— 通過添加和刪除 DOM 元素來更改 DOM 布局的指令。由于結(jié)構(gòu)型指令會在 DOM 中添加和刪除節(jié)點，因此每個元素只能應(yīng)用一個結(jié)構(gòu)型指令。

內(nèi)置指令

內(nèi)置屬性型指令：

常見的內(nèi)置屬性型指令作用

NgClass	添加和刪除一組 CSS 類
NgStyle	添加和刪除一組 HTML 樣式
NgModel	將數(shù)據(jù)雙向綁定添加到 HTML 表單元素

ngClass添加和刪除類

• 可用表達式
• 可用對象，key值為class名，value值為布爾類型

//使用表達式 <div [ngClass]="'svg-notification-' + type">11</div> <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>//使用對象 <div [ngClass]="{'status-flag-process': data.controlStatus === 1, 'status-flag-success': data.controlStatus === 2}">22</div> <div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>this.currentClasses = {saveable: true,modified: false,special: true};

ngStyle設(shè)置內(nèi)聯(lián)樣式

使用對象，key值為style名，value是三元表達式返回對應(yīng)的樣式值

//使用對象 <div [ngStyle]="{'padding-right': data?.flag === 2 ? '8px' : '0','width': type === 'blank' ? '100%' : 'calc(100% - 50px)'}">11</div> <div [ngStyle]="currentStyles">22</div>public this.currentStyles = {'font-style': this.canSave ? 'italic' : 'normal','font-weight': !this.isUnchanged ? 'bold' : 'normal','font-size': this.isSpecial ? '24px' : '12px'};}

ngModel顯示和更新屬性

使用 ngModel 指令顯示數(shù)據(jù)屬性，并在用戶進行更改時更新該屬性。

使用ngModel需要導(dǎo)入FormsModule（從 FormsModule 中導(dǎo)入 ngModel 指令），并將其添加到 NgModule 的 imports 列表中

//src/app/app.module.ts import { FormsModule } from '@angular/forms'; @NgModule({ imports: [FormsModule]})export class AppModule { }

在 HTML 的 <form> 元素上添加 [(ngModel)] 綁定，并將其設(shè)置為等于此屬性，這里是 name。
[(ngModel)] 語法只能設(shè)置數(shù)據(jù)綁定屬性

<input [(ngModel)]="currentItem.name" id="example-ngModel">

如果自定義配置，該表單將屬性綁定和事件綁定分開，使用屬性綁定來設(shè)置屬性，并使用事件綁定來響應(yīng)更改。

<input [ngModel]="currentItem.name" (ngModelChange)="setName($event)" id="example-uppercase">public currentItem = {name: 'jie' } public setName(val:any):void{this.currentItem.name = val;console.log('val==',val)} //也可以這樣使用，如果setName沒有設(shè)置值，默認(rèn)ngModel修改的是currentItem.name的值，如果有設(shè)置值，使用setName里的設(shè)置值。 <input [(ngModel)]="currentItem.name" (ngModelChange)="setName($event)" id="example-ngModel">

內(nèi)置結(jié)構(gòu)型指令

結(jié)構(gòu)型指令的職責(zé)是 HTML 布局。 它們塑造或重塑 DOM 的結(jié)構(gòu)，這通常是通過添加、移除和操縱它們所附加到的宿主元素來實現(xiàn)的。

常見的內(nèi)置結(jié)構(gòu)型指令作用

NgIf	從模板中創(chuàng)建或銷毀子視圖
NgFor	為列表中的每個條目重復(fù)渲染一個節(jié)點
NgSwitch	一組在備用視圖之間切換的指令

ngIf添加或刪除元素

//簡寫方式： <app-item-detail *ngIf="isActive" [item]="item"></app-item-detail> <div *ngIf="!hero" class="name">{{hero.name}}</div>//實際上等價于：//*ngIf 指令移到ng-template上，成為綁定在方括號[ngIf]中的屬性，div的其余部分移到ng-template內(nèi)部 <ng-template [ngIf]="hero"><div class="name">{{hero.name}}</div> </ng-template>

當(dāng)表達式isActive為true，NgIf 會把 ItemDetailComponent 添加到 DOM 中。當(dāng)表達式為false時，NgIf 會從 DOM 中刪除ItemDetailComponent 并銷毀該組件及其所有子組件，從而釋放內(nèi)存和資源。

Angular 不會創(chuàng)建真正的 元素，只會將

和注釋節(jié)點占位符渲染到 DOM 中。

ngFor 條目列表

//簡寫方式： <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">({{i}}) {{hero.name}} </div>//復(fù)寫組件視圖 <app-item-detail *ngFor="let item of items" [item]="item"></app-item-detail>//實際上等價于：//ngFor結(jié)構(gòu)型指令相關(guān)的所有內(nèi)容應(yīng)用到ng-template；而元素上的所有其他綁定和屬性應(yīng)用到了ng-template中的div元素上。 <ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"><div [class.odd]="odd">({{i}}) {{hero.name}}</div> </ng-template>

let 關(guān)鍵字會聲明一個模板輸入變量，你可以在模板中引用該變量。
解析器將 let hero、let i 和 let odd 轉(zhuǎn)換為名為 let-hero、let-i 和 let-odd 的變量。
解析器會將 PascalCase 應(yīng)用于所有指令，并為它們加上指令的屬性名稱（例如 ngFor）。比如，ngFor 的輸入特性 of 和 trackBy ，會映射為 ngForOf 和 ngForTrackBy 。當(dāng) NgFor 指令遍歷列表時，它會設(shè)置和重置它自己的上下文對象的屬性。這些屬性可以包括但不限于 index、odd 和一個名為 $implicit 的特殊屬性。
Angular 會將 let-hero 設(shè)置為上下文的 $implicit 屬性的值， NgFor 已經(jīng)將其初始化為當(dāng)前正在迭代的英雄。

獲取 *ngFor 的 index

在 *ngFor 中，添加一個分號和 let i=index 簡寫形式。下面的例子中把 index 取到一個名為 i 的變量中，并將其與條目名稱一起顯示。

• 索引號從零開始

<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div> <div *ngFor="let item of items;index as i">{{i}}--{{item}}</div>//報錯，由于結(jié)構(gòu)型指令會在 DOM 中添加和刪除節(jié)點，因此每個元素只能應(yīng)用一個結(jié)構(gòu)型指令。 <div *ngIf="flag" *ngFor="let item of items;index as i">{{i}}--{{item}}</div> public flag:boolean = true public items:any[] = ['a','b','c']

用 *ngFor 的 trackBy 跟蹤條目

使用 *ngFor 的 trackBy 屬性，Angular 只能更改和重新渲染已更改的條目，而不必重新加載整個條目列表。類似vue框架上for循環(huán)得key值的作用。

• 如果沒有 trackBy，這些按鈕都會觸發(fā)完全的 DOM 元素替換。
• 有了 trackBy，則只有修改了 id 的按鈕才會觸發(fā)元素替換

// 在簡寫表達式中，將trackBy設(shè)置為trackValue方法 <div *ngFor="let item of items; trackBy: trackValue"></div>//在組件添加一個方法，該方法返回ngFor應(yīng)該跟蹤的值，這里是item.id，如果瀏覽器已經(jīng)渲染過此 id，Angular 就會跟蹤它，而不會重新向服務(wù)器查詢相同的 id。 trackValue(index: number, item: Item): number {return item.id; }

ngSwitch

就像 JavaScript 的 switch 語句一樣。NgSwitch 會根據(jù)切換條件顯示幾個可能的元素中的一個。Angular 只會將選定的元素放入 DOM。

NgSwitch 是一組指令（共三個）：

• NgSwitch —— 一個屬性型指令，它更改其伴生指令的行為。
• NgSwitchCase —— 結(jié)構(gòu)型指令，當(dāng)其綁定值等于開關(guān)值時將其元素添加到 DOM 中，而在其不等于開關(guān)值時將其綁定值移除。
• NgSwitchDefault —— 結(jié)構(gòu)型指令，當(dāng)沒有選中的 NgSwitchCase 時，將其宿主元素添加到 DOM 中。

<div [ngSwitch]="item.spotStatus"><span *ngSwitchCase="'yj'"> 一級評分 </span><span *ngSwitchCase="'ej'"> 二級評分 </span><span *ngSwitchCase="'sj'"> 三級評分 </span><span *ngSwitchDefault>暫無評分</span> </div>

屬性型指令

使用屬性型指令，可以更改 DOM 元素和 Angular 組件的外觀或行為。

應(yīng)用屬性型指令

//Angualr 會創(chuàng)建 HighlightDirective 類的實例，并將 <p> 元素的引用注入到該指令的構(gòu)造函數(shù)中，它會將 <p> 元素的背景樣式設(shè)置為黃色。 <p appHighlight>Highlight me!</p>//src/app/highlight.directive.ts// 從 @angular/core 導(dǎo)入 ElementRef。ElementRef 的 nativeElement 屬性會提供對宿主 DOM 元素的直接訪問權(quán)限 import { Directive, ElementRef } from '@angular/core';//@Directive() 裝飾器的配置屬性會指定指令的 CSS 屬性選擇器 [appHighlight] @Directive({selector: '[appHighlight]' }) export class HighlightDirective {// 在指令的 constructor() 中添加 ElementRef 以注入對宿主 DOM 元素的引用，該元素就是 appHighlight 的作用目標(biāo)constructor(el: ElementRef) {//向 HighlightDirective 類中添加邏輯，將背景設(shè)置為黃色el.nativeElement.style.backgroundColor = 'yellow';} }

處理用戶事件

如何檢測用戶何時將鼠標(biāo)移入或移出元素以及如何通過設(shè)置或清除突出顯示顏色來進行響應(yīng)

//引入HostListener,當(dāng)指針懸停在 p 元素上時，背景顏色就會出現(xiàn)；而當(dāng)指針移出時，背景顏色就會消失 import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({selector: '[appHighlight]' }) export class HighlightDirective {constructor(private el: ElementRef) { }//添加兩個事件處理程序，它們會在鼠標(biāo)進入或離開時做出響應(yīng)，每個事件處理程序都帶有 @HostListener() 裝飾器//使用 @HostListener() 裝飾器，你可以訂閱本屬性型指令宿主 DOM 元素上的事件@HostListener('mouseenter') onMouseEnter() {this.highlight('yellow');}@HostListener('mouseleave') onMouseLeave() {this.highlight('');}//處理程序會委托給一個輔助方法 highlight()，該方法會設(shè)置宿主 DOM 元素 el 的顏色private highlight(color: string) {this.el.nativeElement.style.backgroundColor = color;} }

將值傳遞給屬性型指令

//同時應(yīng)用指令和顏色，通過 appHighlight 指令選擇器使用屬性綁定，將其設(shè)置為 color <p [appHighlight]="color">Highlight me!</p>//導(dǎo)入input import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({selector: '[appHighlight]' }) export class HighlightDirective {//@Input() 裝飾器會將元數(shù)據(jù)添加到此類，以便讓該指令的 appHighlight 屬性可用于綁定@Input() public appHighlight ='';constructor(private el: ElementRef) { }//添加兩個事件處理程序，它們會在鼠標(biāo)進入或離開時做出響應(yīng)，每個事件處理程序都帶有 @HostListener() 裝飾器//使用 @HostListener() 裝飾器，你可以訂閱本屬性型指令宿主 DOM 元素上的事件@HostListener('mouseenter') onMouseEnter() {this.highlight('yellow');}@HostListener('mouseleave') onMouseLeave() {this.highlight('');}//處理程序會委托給一個輔助方法 highlight()，該方法會設(shè)置宿主 DOM 元素 el 的顏色private highlight(color: string) {this.el.nativeElement.style.backgroundColor = color;} }

通過 NgNonBindable 停用 Angular 處理過程

要防止在瀏覽器中進行表達式求值，請將 ngNonBindable 添加到宿主元素。

• ngNonBindable 會停用模板中的插值、指令和綁定
• 如果將 ngNonBindable 應(yīng)用于父元素，則 Angular 會禁用該元素的子元素的任何插值和綁定，例如屬性綁定或事件綁定。
• 但是，ngNonBindable 仍然允許指令在應(yīng)用 ngNonBindable 的元素上工作

//結(jié)果：This should not evaluate: {{ 1 + 1 }} <p ngNonBindable>This should not evaluate: {{ 1 + 1 }}</p>//屬性型指令appHighlight可以起作用，表達式{{ 1 + 1 }} 不會求值 <div ngNonBindable [appHighlight]="'yellow'">This should not evaluate: {{ 1 +1 }}, but will highlight yellow. </div>

創(chuàng)建結(jié)構(gòu)型指令

UnlessDirective 會通過 Angular 生成的 創(chuàng)建一個嵌入的視圖，然后將該視圖插入到該指令的原始

宿主元素緊后面的視圖容器中。
TemplateRef可幫助你獲取 的內(nèi)容，而 ViewContainerRef 可以訪問視圖容器。

//src/app/unless.directive.ts//導(dǎo)入 Input、TemplateRef 和 ViewContainerRef import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';@Directive({ selector: '[appUnless]'}) export class UnlessDirective {private hasView = false;//在指令的構(gòu)造函數(shù)中將 TemplateRef 和 ViewContainerRef 注入成私有變量constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) { }//添加一個帶 setter 的 @Input() 屬性 appUnless@Input() set appUnless(condition: boolean) {if (!condition && !this.hasView) {//如果條件是假值，并且 Angular 以前尚未創(chuàng)建視圖，則此 setter 會導(dǎo)致視圖容器從模板創(chuàng)建出嵌入式視圖this.viewContainer.createEmbeddedView(this.templateRef);this.hasView = true;} else if (condition && this.hasView) {//如果條件為真值，并且當(dāng)前正顯示著視圖，則此 setter 會清除容器，這會導(dǎo)致銷毀該視圖this.viewContainer.clear();this.hasView = false;}} }

使用指令：
*(星號)是將 appUnless 標(biāo)記為結(jié)構(gòu)型指令的簡寫形式。
angular 將結(jié)構(gòu)型指令前面的星號轉(zhuǎn)換為圍繞宿主元素及其后代的 <ng-template>。

//condition為true不顯示，為false顯示 <p *appUnless="condition" class="unless a">123</p>

用<ng-template>創(chuàng)建模板片段

Angular 的 <ng-template> 元素定義了一個默認(rèn)情況下不渲染任何內(nèi)容的模板。
如果沒有結(jié)構(gòu)型指令，并且將某些元素包裝在 <ng-template> 中，則這些元素會消失。

<p>Hip!</p> //沒有結(jié)構(gòu)指令，不會渲染ng-template包裹的div <ng-template> <p>Hip!</p></ng-template><p>Hooray!</p>

總結(jié)

以上是生活随笔為你收集整理的angular 指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。