前言
指令也是NG的核心部分之一蚌成，它可以用來對模板內(nèi)容進(jìn)行邏輯控制集晚。結(jié)合數(shù)據(jù)綁定使用炸渡，基本就告別了手動操作DOM的時代，轉(zhuǎn)而進(jìn)入了美好的數(shù)據(jù)驅(qū)動的前端高效開發(fā)時代束铭。
分類
- 屬性形指令
可以監(jiān)聽或修改其它 HTML 元素廓块、特性 (attribute)、屬性 (property)契沫、組件的行為带猴。例如ngClass和ngStyle指令。
- 結(jié)構(gòu)性指令
負(fù)責(zé)塑造HTML 結(jié)構(gòu)懈万。一般通過添加拴清、刪除或者操作 HTML 元素及其子元素來實現(xiàn)靶病。例如ngIf和ngFor指令。
- 組件
帶有模板的指令贷掖，用于組合程序邏輯和 HTML 模板嫡秕，渲染出應(yīng)用的視圖。
應(yīng)用
ngClass和ngStyle指令之前我們介紹了苹威，讓我們看看其他指令如何使用吧~
- 微模板指令
通過在指令前面加星號昆咽，是一種語法糖。NG會解開這個語法糖牙甫，變成一個<ng-template>掷酗，里面包裹著宿主元素及其子元素。
- *ngIf="表達(dá)式"
表達(dá)式為真的時候展現(xiàn)內(nèi)容窟哺，這是個微模板指令泻轰。
*ngIf="getProductCount()" else="表達(dá)式2"(NG4+)
- [ngSwitch]="表達(dá)式" *ngSwitchCase="表達(dá)式2" *ngSwitchDefault
根據(jù)表達(dá)式和表達(dá)式2的匹配多選一展示內(nèi)容，這是個微模板指令且轨。使用字面量要用單引號浮声。
<div [ngSwitch]="getProductCount()">
<span *ngSwitchCase="2">There are two products</span>
<span *ngSwitchCase="5">There are five products</span>
<span *ngSwitchDefault>This is the default</span>
</div>
- *ngFor="let item of 表達(dá)式"
1.迭代表達(dá)式返回的結(jié)果展現(xiàn)內(nèi)容，這是個微模板指令旋奢。
2.它還自帶一些模板變量泳挥，比如index、odd至朗、even屉符、first、last锹引。
3.應(yīng)對數(shù)據(jù)變更引起的刷新性能問題可以使用trackBy追蹤它矗钟。
<tr *ngFor="let item of getProducts()">
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
- [ngTemplateOutlet]="myTempl"
重復(fù)一塊內(nèi)容
<template #titleTemplate>
<h4 class="p-a-1 bg-success">Repeated Content</h4>
</template>
<template [ngTemplateOutlet]="titleTemplate"></template>
- <ng-container>
不影響DOM的容器，也就是說實際渲染時這塊會被丟棄嫌变，常常在里面使用結(jié)構(gòu)性指令
自定義指令
通常是利用NG的core庫里的Directive, ElementRef, HostListener,Input等符號實現(xiàn)
- 創(chuàng)建屬性指令
步驟：
1.使用Directive聲明一個指令
2.用ElementRef間接操作DOM
3.用HostListener監(jiān)聽DOM事件
4.使用Input自定義屬性
- 創(chuàng)建結(jié)構(gòu)指令
1.使用Directive聲明一個指令
2.使用ngOnChanges鉤子和SimpleChange檢測屬性變更并更新DOM結(jié)構(gòu)
3.使用TemplateRef和ViewContainerRef管理DOM元素
4.使用$implicit隱式變量提供額外的上下文數(shù)據(jù)吨艇，實現(xiàn)模板輸入變量
5.和迭代有關(guān)的還要引入IterableDiffer, IterableDiffers,ChangeDetectorRef, CollectionChangeRecord, ViewRef
- 創(chuàng)建組件
1.使用Component聲明一個組件
2.使用ViewChildren裝飾器獲取模板中的元素
3.組件間都是互相隔離的，默認(rèn)影子DOM模式
4.組件充當(dāng)了“控制器 (controller) ”和“視圖模型 (view model) ”的角色
總結(jié)
屬性形指令免去了我們對DOM的style或者classList進(jìn)行操作腾啥、結(jié)構(gòu)指令免去了在js里createElement东涡、appendElement等創(chuàng)建刪除DOM節(jié)點等操作，組件
