Angular 2.x 結構指令

什麼是結構指令？

結構指令經過添加和刪除 DOM 元素來更改 DOM 佈局。Angular 中兩個常見的結構指令是 *ngIf 和 *ngFor。

瞭解 * 號語法

* 號是語法糖，用於避免使用複雜的語法。咱們以 *ngIf 指令爲例：

(圖片來源：https://netbasal.com/)

• Angular 把 host (宿主元素) 包裝在 template 標籤裏面

• Angular 將 ngIf 轉換爲屬性綁定 - [ngIf]

建立結構指令

首先，讓咱們瞭解如何建立一個結構指令。 接下來咱們將要實現一個簡單的 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>

下面咱們來解釋一下上面的代碼。

TemplateRef

如名字所示，TemplateRef 用於表示模板的引用。

(圖片來源：https://netbasal.com/)

ViewContainerRef

正如上面介紹的，模板中包含了 DOM 元素，但若是要顯示模板中定義的元素，咱們就須要定義一個插入模板中元素的地方。在 Angular 中，這個地方被稱做容器，而 ViewContainerRef 用於表示容器的引用。那什麼元素會做爲容器呢？

Angular 將使用 comment 元素替換 template 元素，做爲視圖容器。

咱們來看一個具體的示例：

@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'
  }
}

以上代碼成功運行後，瀏覽器的顯示內容以下：

(圖片來源：https://netbasal.com/)

ViewContainerRef 對象提供了 createEmbeddedView() 方法，該方法接收 TemplateRef 對象做爲參數，並將模板中的內容做爲容器 (comment 元素) 的兄弟元素，插入到頁面中。

如今，你已經瞭解如何建立結構指令，接下來讓咱們看看兩個具體的實例。

基於用戶角色顯示不一樣的內容

指令定義

@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();
  }
}

指令應用

<div *ifRole="'admin'">
  Only for Admin
</div>

<div *ifRole="'client'">
  Only for Client
</div>

<div *ifRole="'editor'">
  Only for Editor
</div>

建立 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;
    }
}

以上示例中，咱們在調用 createEmbeddedView() 方法時，設置了第二個參數 {$implicit: num} 。Angular 爲咱們提供了 let 模板語法，容許在生成上下文時定義和傳遞上下文。

這將容許咱們引用 *range="[20,30]; let num" 模板中聲明的變量。咱們使用 $implicit 名稱，由於咱們不知道用戶在使用這個指令時，會使用什麼名字。

(圖片來源：https://netbasal.com/)

指令應用

<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>

以上代碼成功運行後，瀏覽器的顯示內容以下：

(圖片來源：https://netbasal.com/)

參考資源

• The Power of Structural Directives in Angular