Angular #35 - Directives and Pipes[1]

• *NgIf 是有條件地長出 DOM
• *NgFor 是依傳入的陣列動態長出 DOM

• Pipe 是透過在 template 上針對屬性加上 | 符號，後面再接著 pipe 的名稱與可選的參數

• Directive 被區分為兩種
  • 一種會針對元素屬性作修改
  • 另一種會修改 component 的行為
• 為何會需要自定義？
  • 在 controller/template 增加額外的邏輯的話，的確是不需要自定義 Directive 或是 Pipe，但:
    • 重用與減少:
      • 與其在每一個 component 都實作類似邏輯，不如抽出來共用
      • 減少程式足跡(也就是程式碼的總量)，藉以提高效率及可讀性
    • 較易維護，高內聚的元件
      • 有時候在 component 寫太多邏輯會讓它很像垃圾場，堆滿了和元件不相干的程式碼
      • 透過 Directive 與 Pipe 可以使得 component 單純許多
    • 可測試性
      • 抽出可共用的部份，不論是 Directive/Pipe 本身，或是 component 測試度都提高了
      • 因為相對而言情境的排列組合變少了，且相依程度也較低

  git clone https://github.com/angular-in-action/stocks-enhanced
  cd stocks-enhanced
  git checkout start

• 以下的指令可以用來建立 directive

    ng g d directives/card-type

  • 就像建立 Component 一樣，CLI 真是好用
• 接著實作 card-type.directive.ts 的內容

    import { Directive, ElementRef, Input, OnInit } from '@angular/core';
    @Directive({
      selector: '[cardType]'
    })
    export class CardTypeDirective implements OnInit {
      @Input() cardType: number = 0;
      @Input() increaseClass = 'increase';
      @Input() decreaseClass = 'decrease';
      constructor(private el: ElementRef) { }
      ngOnInit() {
        if (this.cardType) {
          if (this.cardType >= 0) {
            this.el.nativeElement.classList.add(this.increaseClass);
            this.el.nativeElement.classList.remove(this.decreaseClass);
          } else if (this.cardType <= 0) {
            this.el.nativeElement.classList.add(this.decreaseClass);
            this.el.nativeElement.classList.remove(this.increaseClass);
          } else {
            this.el.nativeElement.classList.remove(this.increaseClass);
            this.el.nativeElement.classList.remove(this.decreaseClass);
          }
        }
      }
    }

  • 其實跟建 Component 差不多
  • @Directive decorator 定義了selector，意思是 cardType 這個 Directive 可以當作 HTML element(或 Angular Component) 的 attribute
  • 建構子注入了一個 ElementRef, 是一個參考，指向的就是被掛的元素本身
  • 特別留意一下這個 Directive 雖然有一點客製化，不過它開的 3 個 input 是可以任意給定 2 個 CSS class 與 1 個區分種類的 number
• 來調整一下 summary.component.html，如下:

    <div class="mdl-card stock-card mdl-shadow--2dp" [cardType]="stock.change" [@fadeIn]="'in'" style="width: 100%;">

  • 原本是用 ngClass 搭配 isPositive() 及 isNegative() 兩個方法，這個部份調整成以自定義的 Directive cardType 綁定到 stock.change 的屬性值
  • 除了加上新的 Directive 之外，也用上了 fadeIn 這個動畫, 這在 SummaryComponent 的 decorator 中有定義，使用的方法就是 @ 加上 trigger 的名稱(in)
  • 自定義的 Directive 現在取代了原本用 NgClass 設定的條件，而且能接受更多樣的 input

• 它可以用來改變 Element 的屬性
• 以此篇的例子就是調整 css
• 下一篇將針對既有的第三方 Component，以自行定義的 Directive 去改變它的屬性