本文根據(jù)官網(wǎng)的例子簡單介紹Angular管道的創(chuàng)建和使用，Angular官方文檔

創(chuàng)建管道

創(chuàng)建一個管道可以直接使用ionic cli 工具

ionic g pipe sxypie

和創(chuàng)建 指令基本類似，導(dǎo)入導(dǎo)出也是一樣的。

sxypie.ts 代碼如下

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sxypie',
  pure: true,       //true表示純管道， false表示非純管道
})
export class SxypiePipe implements PipeTransform {

  /**
   * 放大指數(shù)
   * {{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  分別就是那兩個參數(shù)

測試結(jié)果如下

自定義管道