Angular 2.x學(xué)習(xí)教程之結(jié)構(gòu)指令詳解
結(jié)構(gòu)指令是什么?
結(jié)構(gòu)指令通過(guò)添加和刪除 DOM 元素來(lái)更改 DOM 布局。Angular 中兩個(gè)常見(jiàn)的結(jié)構(gòu)指令是 *ngIf
和 *ngFor
。
了解 * 號(hào)語(yǔ)法
* 號(hào)是語(yǔ)法糖,用于避免使用復(fù)雜的語(yǔ)法。我們以 *ngIf 指令為例:
(圖片來(lái)源:https://netbasal.com/)
- Angular 把 host (宿主元素) 包裝在 template 標(biāo)簽里面
- Angular 將 ngIf 轉(zhuǎn)換為屬性綁定 - [ngIf]
創(chuàng)建結(jié)構(gòu)指令
首先,讓我們了解如何創(chuàng)建一個(gè)結(jié)構(gòu)指令。 接下來(lái)我們將要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 ngIf 指令。
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[myNgIf]'}) export class MyNgIfDirective { constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } @Input() set myNgIf(condition: boolean) { if (condition) { this.viewContainer.createEmbeddedView(this.templateRef); } else { this.viewContainer.clear(); } } }
我們可以按照以下方式使用我們的指令:
<div *myNgIf=”condition”></div>
下面我們來(lái)解釋一下上面的代碼。
TemplateRef
如名字所示,TemplateRef 用于表示模板的引用。
(圖片來(lái)源:https://netbasal.com/)
ViewContainerRef
正如上面介紹的,模板中包含了 DOM 元素,但如果要顯示模板中定義的元素,我們就需要定義一個(gè)插入模板中元素的地方。在 Angular 中,這個(gè)地方被稱作容器,而 ViewContainerRef 用于表示容器的引用。那什么元素會(huì)作為容器呢?
Angular 將使用 comment 元素替換 template 元素,作為視圖容器。
我們來(lái)看一個(gè)具體的示例:
@Component({ selector: 'my-app', template: ` <div> <h2 *myNgIf="condition">Hello {{name}}</h2> <button (click)="condition = !condition">Click</button> </div> `, }) export class App { name: string; condition: boolean = false; constructor() { this.name = 'Angular2' } }
以上代碼成功運(yùn)行后,瀏覽器的顯示內(nèi)容如下:
(圖片來(lái)源:https://netbasal.com/)
ViewContainerRef 對(duì)象提供了 createEmbeddedView()
方法,該方法接收 TemplateRef 對(duì)象作為參數(shù),并將模板中的內(nèi)容作為容器 (comment 元素) 的兄弟元素,插入到頁(yè)面中。
現(xiàn)在,你已經(jīng)了解如何創(chuàng)建結(jié)構(gòu)指令,接下來(lái)讓我們看看兩個(gè)具體的實(shí)例。
基于用戶角色顯示不同的內(nèi)容
指令定義
@Directive({selector: '[ifRole]'}) export class IfRoleDirective { user$ : Subscription; @Input("ifRole") roleName : string; constructor( private templateRef : TemplateRef<any>, private viewContainer : ViewContainerRef, private authService : AuthService ) {} ngOnInit() { this.user$ = this.authService.user .do(() => this.viewContainer.clear()) .filter(user => user.role === this.roleName) .subscribe(() => { this.viewContainer.createEmbeddedView(this.templateRef); }); } ngOnDestroy() { this.user$.unsubscribe(); } }
指令應(yīng)用
<div *ifRole="'admin'"> Only for Admin </div> <div *ifRole="'client'"> Only for Client </div> <div *ifRole="'editor'"> Only for Editor </div>
創(chuàng)建 Range 指令
指令定義
import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core'; @Directive({ selector: '[range]' }) export class RangeDirective { _range: number[]; @Input() set range(value: number) { this.vcr.clear(); this._range = this.generateRange(value[0], value[1]); this._range.forEach(num => { this.vcr.createEmbeddedView(this.tpl, { $implicit: num }); }); } constructor( private vcr: ViewContainerRef, private tpl: TemplateRef<any>) { } private generateRange(from: number, to: number): number[] { var numbers: number[] = []; for (let i = from; i <= to; i++) { numbers.push(i); } return numbers; } }
以上示例中,我們?cè)谡{(diào)用 createEmbeddedView()
方法時(shí),設(shè)置了第二個(gè)參數(shù) {$implicit: num}
。Angular 為我們提供了 let 模板語(yǔ)法,允許在生成上下文時(shí)定義和傳遞上下文。
這將允許我們引用 *range="[20,30]; let num"
模板中聲明的變量。我們使用 $implicit 名稱,因?yàn)槲覀儾恢烙脩粼谑褂眠@個(gè)指令時(shí),會(huì)使用什么名字。
(圖片來(lái)源:https://netbasal.com/)
指令應(yīng)用
<h1>Your age:</h1> <select> <ng-container *range="[18, 80]; let num"> <option [ngValue]="num">{{num}}</option> </ng-container> </select> <h1>Year:</h1> <select> <ng-container *range="[1998, 2016]; let num"> <option [ngValue]="num">{{num}}</option> </ng-container> </select>
以上代碼成功運(yùn)行后,瀏覽器的顯示內(nèi)容如下:
(圖片來(lái)源:https://netbasal.com/)
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié)
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能,包括數(shù)據(jù)綁定、建立模型屬性、驗(yàn)證表單等,感興趣的小伙伴們可以參考一下2016-07-07Angular6 Filter實(shí)現(xiàn)頁(yè)面搜索的示例代碼
這篇文章主要介紹了Angular6 Filter實(shí)現(xiàn)頁(yè)面搜索的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12自學(xué)實(shí)現(xiàn)angularjs依賴注入
這篇文章主要為大家詳細(xì)介紹了angularjs依賴注入的自己成果,如何實(shí)現(xiàn)angularjs依賴注入,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12淺談angularjs module返回對(duì)象的坑(推薦)
下面小編就為大家?guī)?lái)一篇淺談angularjs module返回對(duì)象的坑(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10