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等将一些公共的代码从业务代码中抽离，其最终目的就是解耦，下降代码的耦合度。经过他的框架能够更好的管理应用程序。