作為前端開發人員，我們在網站開發時，需要讀取後端的介面進行檢視層的資料展示。我們經常會遇到介面給予我們的值不是最終展現的資料，例如：後端返回的金額是number型別額資料，我們需要遇到千分位用逗號隔開（10000 -> 10,000）,重量10000g轉成10kg等，這些需要前端把資料進行簡單的轉換成對使用者友好的格式。在angular6中pipe便發揮這樣的作用，熟悉vue的同學會感覺非常類似vue中的computed計算屬性。

下面介紹angular6中pipe的具體用法

1、ng g pipe <pipe名稱>

pipe名稱可以帶有路徑，如pipes/pipename 這樣就會在src/app目錄生成pipes目錄，並在齊目錄下生成檔案pipename.pipe.ts

2、pipe檔案中的程式碼

(1)、引入相應模組

import { Pipe, PipeTransform } from '@angular/core'; (2)、宣告pipe @Pipe({ 　　name: 'weightChange' }) name值為程式碼中需要用到的對應管道的名稱 宣告pipe時還有另外一個屬性pure，接受bool值，用來宣告是不是純管道，預設情況下是純管道，那麼純管道和非純管道有什麼區別呢？ 管道中純管道和非純管道之間的區別關鍵在於： 如果是純管道，他檢測的深讀很低，比如檢測一個物件陣列，物件陣列中的物件的某個屬性發生變化的時候，純管道是檢測不到的，這時候就需要用到非純管道。 但是要注意非純管道對效能影響較大。具體可以參考https://angular.cn/guide/pipes 官方解釋。 (3)、pipe類 export class weightChangePipe implements PipeTransform { 　　transform(value: any, args?: any): any { 　　　　return value&&value>1000?value/1000+'kg':value+'g'; 　　} } transform方法將原始資料作為引數，方法中的具體程式碼是將原始值轉化成最終值，以上程式碼是將大於1000g的值轉成kg單位的例子 (4)、將改管道在angular的模組中進行宣告 @NgModule({ 　　declarations: [ 　　　　........ 　　　　TimechangePipe, 　　　　...... 　　] }) 這樣就可以在具體的程式碼中直接使用了 例如在程式碼中： <span>{{ riceWeight | weightChange }}<span>   angular中引入了概念比如service, directive,pipe等將一些公共的程式碼從業務程式碼中抽離，其最終目的就是解耦，降低程式碼的耦合度。通過他的框架可以更好的管理應用程式。