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;
    }
  }
}