Angular 4.x template syntax & common directives

semlinker發表於2019-02-16
Angular

閱讀 Angular 6/RxJS 最新教程，請訪問前端修仙之路

模板語法簡介

插值表示式

<div>Hello {{name}}</div>

等價於

<div [textContent]="interpolate([`Hello`], [name])"></div>

模板表示式

屬性繫結

輸入屬性的值為常量

<show-title title="Some Title"></show-title>

等價於

<show-title [title]="`Some Title`"></show-title>

輸入屬性的值為例項屬性

<show-title [title]="title"></show-title>

等價於

<show-title bind-title="title"></show-title>

事件繫結

<date-picker (dateChanged)="statement()"></date-picker>

等價於

<date-picker on-dateChanged="statement()"></date-picker>

模板引用變數

<video-player #player></video-player> 
<button (click)="player.pause()">Pause</button>

等價於

<video-player ref-player></video-player>

雙向繫結

<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event">

等價於

<input [(ngModel)]="todo.text">

* 與 <template>

*ngIf

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

最終轉換為

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

*ngFor

<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" 
    [hero]="hero">
</hero-detail>

最終轉換為

<template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes">
  <hero-detail [hero]="hero"></hero-detail>
</template>

常用指令簡介

NgIf

<div *ngIf="false"></div> <!-- never displayed -->
<div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
<div *ngIf="str == `yes`"></div> <!-- displayed if str holds the string "yes" -->
<div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

NgSwitch

有時候需要根據不同的條件，渲染不同的元素，此時我們可以使用多個 ngIf 來實現。

<div class="container">
    <div *ngIf="myVar == `A`">Var is A</div>
    <div *ngIf="myVar == `B`">Var is B</div>
    <div *ngIf="myVar != `A` && myVar != `B`">Var is something else</div>
</div>

如果 myVar 的可選值多了一個 `C`，就得相應增加判斷邏輯：

<div class="container">
    <div *ngIf="myVar == `A`">Var is A</div>
    <div *ngIf="myVar == `B`">Var is B</div>
    <div *ngIf="myVar == `C`">Var is C</div>
    <div *ngIf="myVar != `A` && myVar != `B` && myVar != `C`">
      Var is something else
      </div>
</div>

可以發現 Var is something else 的判斷邏輯，會隨著 myVar 可選值的新增，變得越來越複雜。遇到這種情景，我們可以使用 ngSwitch 指令。

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchCase="`A`">Var is A</div>
    <div *ngSwitchCase="`B`">Var is B</div>
    <div *ngSwitchCase="`C`">Var is C</div>
    <div *ngSwitchDefault>Var is something else</div>
</div>

NgStyle

NgStyle 讓我們可以方便得通過 Angular 表示式，設定 DOM 元素的 CSS 屬性。

  • 設定元素的背景顏色
<div [style.background-color="`yellow`"]>
  Use fixed yellow background
</div>
  • 設定元素的字型大小
<!-- 支援單位: px | em | %-->
<div>
   <span [ngStyle]="{color: `red`}" [style.font-size.px]="fontSize">
      red text
   </span>
</div>

NgStyle 支援通過鍵值對的形式設定 DOM 元素的樣式：

<div [ngStyle]="{color: `white`, `background-color`: `blue`}">
   Uses fixed white text on blue background
</div>

注意到 background-color 需要使用單引號，而 color 不需要。這其中的原因是，ng-style 要求的引數是一個 Javascript 物件，color 是一個有效的 key，而 background-color 不是一個有效的 key ，所以需要新增 ``。

NgStyle 原始碼片段

@Directive({selector: `[ngStyle]`})
export class NgStyle implements DoCheck {
  private _ngStyle: {[key: string]: string};
  private _differ: KeyValueDiffer<string, string|number>;

  constructor(
    private _differs: KeyValueDiffers, 
    private _ngEl: ElementRef, 
    private _renderer: Renderer) {}

  @Input()
  set ngStyle(v: {[key: string]: string}) { 
    // <div [ngStyle]="{color: `white`, `background-color`: `blue`}">
    this._ngStyle = v;
    if (!this._differ && v) {
      this._differ = this._differs.find(v).create();
    }
  }
 
  // 設定元素的樣式
  private _setStyle(nameAndUnit: string, value: string|number): void {
    const [name, unit] = nameAndUnit.split(`.`); // 擷取樣式名和單位
    value = value != null && unit ? `${value}${unit}` : value;

    this._renderer.setElementStyle(this._ngEl.nativeElement, name, value as string);
  }
}

NgClass

NgClass 接收一個物件字面量，物件的 key 是 CSS class 的名稱，value 的值是 truthy/falsy 的值，表示是否應用該樣式。

  • CSS Class
.bordered {
    border: 1px dashed black; background-color: #eee;
}
  • HTML
<!-- Use boolean value -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

<!-- Use component instance property -->
<div [ngClass]="{bordered: isBordered}">
   Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

<!-- Class names contains dashes -->
<div[ngClass]="{`bordered-box`: false}">
   Class names contains dashes must use single quote
</div>

<!-- Use a list of class names -->
<div class="base" [ngClass]="[`blue`, `round`]"> 
  This will always have a blue background and round corners
</div>

NgFor

NgFor 指令用來根據集合(陣列) ，建立 DOM 元素，類似於 ng1 中 ng-repeat 指令

<div class="ui list" *ngFor="let c of cities; let num = index"> 
  <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

使用 trackBy 提高列表的效能

@Component({
  selector: `my-app`,
  template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
export class App {

  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }
  
  getItems() {
    this.collection = this.getItemsFromServer();
  }
  
  getItemsFromServer() {
    return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
  }
  
  trackByFn(index, item) {
    return index; // or item.id
  }
}

NgNonBindable

ngNonBindable 指令用於告訴 Angular 編譯器，無需編譯頁面中某個特定的HTML程式碼片段。

<div class=`ngNonBindableDemo`>
    <span class="bordered">{{ content }}</span>
    <span class="pre" ngNonBindable>
      &larr; This is what {{ content }} rendered
    </span>
</div>

Angular 4.x 新特性

If…Else Template Conditions

語法

<element *ngIf="[condition expression]; else [else template]"></element>

使用示例

<ng-template #hidden>
  <p>You are not allowed to see our secret</p>
</ng-template>
<p *ngIf="shown; else hidden">
  Our secret is being happy
</p>

<template> —> <ng-template>

使用示例

import { Component, OnInit } from `@angular/core`;
import { Observable } from `rxjs/Observable`;
import `rxjs/add/observable/of`;
import `rxjs/add/operator/delay`;

@Component({
  selector: `exe-app`,
  template: `
   <ng-template #fetching>
      <p>Fetching...</p>
   </ng-template>
   <p *ngIf="auth | async; else fetching; let user">
      {{user.username }}
   </p>
  `,
})
export class AppComponent implements OnInit {
  auth: Observable<{}>;

  ngOnInit() {
    this.auth = Observable
      .of({ username: `semlinker`, password: `segmentfault` })
      .delay(new Date(Date.now() + 2000));
  }
}

我有話說

使用 [hidden] 屬性控制元素可見性存在的問題

<div [hidden]="!showGreeting">
  Hello, there!
</div>

上面的程式碼在通常情況下，都能正常工作。但當在對應的 DOM 元素上設定 display: flex 屬性時，儘管[hidden] 對應的表示式為 true，但元素卻能正常顯示。對於這種特殊情況，則推薦使用 *ngIf。

直接使用 DOM API 獲取頁面上的元素存在的問題

@Component({
  selector: `my-comp`,
  template: `
    <input type="text" />
    <div> Some other content </div>
  `
})
export class MyComp {
  constructor(el: ElementRef) {
    el.nativeElement.querySelector(`input`).focus();
  }
}

以上的程式碼直接通過 querySelector() 獲取頁面中的元素，通常不推薦使用這種方式。更好的方案是使用 @ViewChild 和模板變數，具體示例如下：

@Component({
  selector: `my-comp`,
  template: `
    <input #myInput type="text" />
    <div> Some other content </div>
  `
})
export class MyComp implements AfterViewInit {
  @ViewChild(`myInput`) input: ElementRef;

  constructor(private renderer: Renderer) {}

  ngAfterViewInit() {
    this.renderer.invokeElementMethod(
        this.input.nativeElement, `focus`);
    }
}

另外值得注意的是，@ViewChild() 屬性裝飾器，還支援設定返回物件的型別，具體使用方式如下：

@ViewChild(`myInput`) myInput1: ElementRef;
@ViewChild(`myInput`, {read: ViewContainerRef}) myInput2: ViewContainerRef;

若未設定 read 屬性，則預設返回的是 ElementRef 物件例項。

相關文章