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