Angular 指令的不同類型如下：

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

內置指令

內置屬性型指令：

常見的內置屬性型指令作用

NgClass	添加和刪除一組 CSS 類
NgStyle	添加和刪除一組 HTML 樣式
NgModel	將數據雙向綁定添加到 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設置內聯樣式

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

//使用對象 <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 指令顯示數據屬性，并在用戶進行更改時更新該屬性。

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

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

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

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

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

<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沒有設置值，默認ngModel修改的是currentItem.name的值，如果有設置值，使用setName里的設置值。 <input [(ngModel)]="currentItem.name" (ngModelChange)="setName($event)" id="example-ngModel">

內置結構型指令

結構型指令的職責是 HTML 布局。 它們塑造或重塑 DOM 的結構，這通常是通過添加、移除和操縱它們所附加到的宿主元素來實現的。

常見的內置結構型指令作用

NgIf	從模板中創建或銷毀子視圖
NgFor	為列表中的每個條目重復渲染一個節點
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內部 <ng-template [ngIf]="hero"><div class="name">{{hero.name}}</div> </ng-template>

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

Angular 不會創建真正的 元素，只會將

和注釋節點占位符渲染到 DOM 中。

ngFor 條目列表

//簡寫方式： <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">({{i}}) {{hero.name}} </div>//復寫組件視圖 <app-item-detail *ngFor="let item of items" [item]="item"></app-item-detail>//實際上等價于：//ngFor結構型指令相關的所有內容應用到ng-template；而元素上的所有其他綁定和屬性應用到了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 關鍵字會聲明一個模板輸入變量，你可以在模板中引用該變量。
解析器將 let hero、let i 和 let odd 轉換為名為 let-hero、let-i 和 let-odd 的變量。
解析器會將 PascalCase 應用于所有指令，并為它們加上指令的屬性名稱（例如 ngFor）。比如，ngFor 的輸入特性 of 和 trackBy ，會映射為 ngForOf 和 ngForTrackBy 。當 NgFor 指令遍歷列表時，它會設置和重置它自己的上下文對象的屬性。這些屬性可以包括但不限于 index、odd 和一個名為 $implicit 的特殊屬性。
Angular 會將 let-hero 設置為上下文的 $implicit 屬性的值， NgFor 已經將其初始化為當前正在迭代的英雄。

獲取 *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>//報錯，由于結構型指令會在 DOM 中添加和刪除節點，因此每個元素只能應用一個結構型指令。 <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循環得key值的作用。

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

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

ngSwitch

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

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

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

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

屬性型指令

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

應用屬性型指令

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

處理用戶事件

如何檢測用戶何時將鼠標移入或移出元素以及如何通過設置或清除突出顯示顏色來進行響應

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

將值傳遞給屬性型指令

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

通過 NgNonBindable 停用 Angular 處理過程

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

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

//結果：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>

創建結構型指令

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

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

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

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

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

用<ng-template>創建模板片段

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

<p>Hip!</p> //沒有結構指令，不會渲染ng-template包裹的div <ng-template> <p>Hip!</p></ng-template><p>Hooray!</p>

總結

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

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