angular6之pipe管道

做爲前端開發人員，咱們在網站開發時，須要讀取後端的接口進行視圖層的數據展現。咱們常常會遇到接口給予咱們的值不是最終展示的數據，例如：後端返回的金額是number類型額數據，咱們須要遇到千分位用逗號隔開（10000 -> 10,000）,重量10000g轉成10kg等，這些須要前端把數據進行簡單的轉換成對用戶友好的格式。在angular6中pipe便發揮這樣的做用，熟悉vue的同窗會感受很是相似vue中的computed計算屬性。

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

一、ng g pipe <pipe名稱>

pipe名稱能夠帶有路徑，如pipes/pipename 這樣就會在src/app目錄生成pipes目錄，並在齊目錄下生成文件pipename.pipe.ts

二、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等將一些公共的代碼從業務代碼中抽離，其最終目的就是解耦，下降代碼的耦合度。經過他的框架能夠更好的管理應用程序。