https://www.jianshu.com/p/5140a91959cajavascript
管道的定义中体现了几个关键点:
一、管道是一个带有“管道元数据(pipe metadata)”装饰器的类。
二、这个管道类实现了PipeTransform接口的transform方法,该方法接受一个输入值和一些可选参数,并返回转换后的值。
三、当每一个输入值被传给transform方法时,还会带上另外一个参数,好比咱们这个管道中的exponent(放大指数)。
四、咱们经过@Pipe装饰器告诉Angular:这是一个管道。该装饰器是从Angular的core库中引入的。
五、这个@Pipe装饰器容许咱们定义管道的名字,这个名字会被用在模板表达式中。它必须是一个有效的JavaScript标识符。 好比,咱们下面这个管道的名字是exponentialStrength。java
transform方法是管道的基本要素。 PipeTransform接口中定义了它,并用它指导各类工具和编译器。 理论上说,它是可选的。Angular不会管它,而是直接查找并执行transform方法。git
咱们使用自定义管道的方式和内置管道彻底相同。
咱们必须在AppModule的declarations数组中包含这个管道。
咱们必须手动注册自定义管道。若是忘了,Angular就会报告一个错误。
还须要注意的是,咱们使用的时候的管道的名字是自定义管道用@Pipe注解的时候命名的名字。github
如下是我根据自定义管道的知识写的几个实例,有的是参考网上的实例在本地实现可行的代码,也在此提供参考数组
/* 管道中纯管道和非纯管道之间的区别关键在于: 若是是纯管道,他检测的深读很低,好比检测一个对象数组,对象数组中的对象的某个属性发生变化的时候,纯管道是检测不到的,这时候就须要用到非纯管道 */ 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 步骤 : 一、导入Pipe,PipeTransform 二、经过注解定义名字,定义是纯管道仍是非纯管道,默认是纯管道 三、定义管道并继承PipeTransform 四、实现继承的方法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; } }
angular实例代码中(https://github.com/crk123kk/angular-example)的angular-pipe-custom工具