對自定義管道的認識

管道的定義中體現了幾個關鍵點：
　　1、管道是一個帶有“管道元數據(pipe metadata)”裝飾器的類。
　　2、這個管道類實現了PipeTransform接口的transform方法，該方法接受一個輸入值和一些可選參數，並返回轉換後的值。
　　3、當每個輸入值被傳給transform方法時，還會帶上另一個參數，比如我們這個管道中的exponent(放大指數)。
　　4、我們通過@Pipe裝飾器告訴Angular：這是一個管道。該裝飾器是從Angular的core庫中引入的。
　　5、這個@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
    步驟 ：
        1、導入Pipe，PipeTransform
        2、通過註解定義名字，定義是純管道還是非純管道，默認是純管道
        3、定義管道並繼承PipeTransform
        4、實現繼承的方法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

angular自定義管道