作為前端開發人員，我們在網站開發時，需要讀取后端的接口進行視圖層的數據展示。我們經常會遇到接口給予我們的值不是最終展現的數據，例如：后端返回的金額是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等將一些公共的代碼從業務代碼中抽離，其最終目的就是解耦，降低代碼的耦合度。通過他的框架可以更好的管理應用程序。