本文根据官网的例子简单介绍Angular管道的创建和使用，Angular官方文档
创建管道
创建一个管道可以直接使用ionic cli 工具
ionic g pipe sxypie
和创建 指令基本类似，导入导出也是一样的。
sxypie.ts 代码如下
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sxypie',
pure: true, //true表示纯管道， false表示非纯管道
})
export class SxypiePipe implements PipeTransform {
/**
* 放大指数
* {{2 | exponentialStrength: 10}} 2^10 = 1024
* @param {number} value
* @param {string} exponent
* @returns {number}
*/
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}
使用管道
主要模板代码如下
<p>自定义管道</p>
<h1>{{2 | sxypie: 10}}</h1><br>
2 和 10 分别就是那两个参数
测试结果如下
自定义管道
