Ionic3 自定义管道

本文根据官网的例子简单介绍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  分别就是那两个参数

测试结果如下

自定义管道