Angular管道

1. 需要使用@Pipe來裝飾類
2. 實現PipeTransform的transform方法，該方法接受一個輸入值和一些可選參數
3. 在@Pipe裝飾器中指定管道的名字，這個名字就可以在模板中使用。
4. 自己寫管道時，在 common/pipes下建一個ts文件

一. 小數管道

接收的參數格式爲{最少整數位數}.{最少小數位數}-{最多小數位數}
其中最少整數位數默認爲1
最少小數位數默認爲0
最多小數位數默認爲3
當小數位數少於規定的{最少小數位數}時，會自動補0
當小數位數多於規定的{最多小數位數}時，會四捨五入

圓周率是{{pi | number:'2.2-4'}}

pi:number = 3.14159; //輸出是：圓周率是03.1416

二.限制字符串長度

common/pipes下的ts裏：

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

// 限制字符串長度
@Pipe({ name: 'textlengthPipe' })
export class TextlengthPipe implements PipeTransform {
  transform(value,size:number): string  {
    const length = value.length;
    if(value == '') return value;
    if (length > size) {
      return value.substr(0,size) + ' …';//'...'可以換成其它文字
    }else{
      return value;
    }
  };
};

html裏申明使用：

<span >{{ (dataList?.instanceName | textlengthPipe:38) || '--'}}</span>

三.重寫toFixed方法

/**
   * 重寫toFixed方法,解決四捨五入不準確的問題
   * @param n 原始數據
   * @param d 小數位數
   */
  toFixed(n: number, d: number): number {
    if (d <= 0) {
      return Math.round(n);
    } else {
      const radix = 10 * d;
      return Math.round(n * radix) / radix;
    }
  }
}