angualr 管道的那些事

對自定義管道的認識

管道的定義中體現了幾個關鍵點：
　　一、管道是一個帶有「管道元數據(pipe metadata)」裝飾器的類。
　　二、這個管道類實現了PipeTransform接口的transform方法，該方法接受一個輸入值和一些可選參數，並返回轉換後的值。
　　三、當每一個輸入值被傳給transform方法時，還會帶上另外一個參數，好比咱們這個管道中的exponent(放大指數)。
　　四、咱們經過@Pipe裝飾器告訴Angular：這是一個管道。該裝飾器是從Angular的core庫中引入的。
　　五、這個@Pipe裝飾器容許咱們定義管道的名字，這個名字會被用在模板表達式中。它必須是一個有效的JavaScript標識符。 好比，咱們下面這個管道的名字是exponentialStrength。

PipeTransform接口

transform方法是管道的基本要素。 PipeTransform接口中定義了它，並用它指導各類工具和編譯器。 理論上說，它是可選的。Angular不會管它，而是直接查找並執行transform方法。

自定義管道須要注意

　　咱們使用自定義管道的方式和內置管道徹底相同。
　　咱們必須在AppModule的declarations數組中包含這個管道。
　　咱們必須手動註冊自定義管道。若是忘了，Angular就會報告一個錯誤。
　　還須要注意的是，咱們使用的時候的管道的名字是自定義管道用@Pipe註解的時候命名的名字。

自定義管道實例

過濾todo

/*
    管道中純管道和非純管道之間的區別關鍵在於：
        若是是純管道，他檢測的深讀很低，好比檢測一個對象數組，對象數組中的對象的某個屬性發生變化的時候，純管道是檢測不到的，這時候就須要用到非純管道
*/
import {Pipe, PipeTransform} from '@angular/core';
/*
 * Example:
 *   todoList | todosStatusPipe:'done':selectFilter
 *   其實這裏咱們已知必定是根據todo的done屬性來過濾，那麼其實是能夠將'done'這個傳值給去了，直接在管道方法中用done來判斷，可是
 *   這裏主要是爲了說明.引出的屬性和[]引出的屬性是有區別的，[]是能夠傳入變量來引出屬性的
*/
@Pipe({
  name: 'todosStatusPipe',
  pure: false
})
export class TodosStatusPipe implements PipeTransform {
  transform(value: Array<any>, filterString: string, status: string): Array<any> {
    let filterTodoList = [];
    switch(status){
        case 'all':
            filterTodoList = value;
            break;
        case 'active':
            filterTodoList = value.filter(todo => !todo[filterString]);
            break;
        case 'completed':
            filterTodoList = value.filter(todo => todo[filterString]);
            break;
    }
    return filterTodoList;
  }
}

　　

指數倍增管道

/*
    exponential-strength.pipe.ts
    步驟 ：
        一、導入Pipe，PipeTransform
        二、經過註解定義名字，定義是純管道仍是非純管道，默認是純管道
        三、定義管道並繼承PipeTransform
        四、實現繼承的方法transform
*/
import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

　　

判斷性別管道

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
  name: 'sexReform',
  //非純管道
  //重點在於實現PipeTransform接口的transform方法，定義爲非純管道僅用於演示，非純管道對性能影響較大，儘可能避免。
  pure:false
})
export class SexReformPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    let chineseSex;
    switch (value) {
      case 'male':
        chineseSex = '男';
        break;
      case 'female':
        chineseSex = '女';
        break;
      default:
        chineseSex = '未知性別';
        break;
    }
    return chineseSex;
  }
}

　　

參考原文地址：https://www.jianshu.com/p/5140a91959ca