angular4.x学习笔记--管道（相当于1.x中的filter过滤器）

管道（过滤器）

管道其实就是过滤器，就是叫法不一致而已。主要用于格式化源数据，而不改变源数据。定义和使用的方式也很简单：

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

/*
* 订单取消状态：默认为ALL表示全部，CANCEL表示已取消，NOTCANCEL表示正常
*/
@Pipe({ name: 'cancelStatus' })
export class CancelStatusPipe implements PipeTransform {
transform(status:string, blank: boolean):string {
const map = {
"ALL": "全部",
"NOTCANCEL": "正常",
"CANCEL": "已取消",
"": "暂无",
}

return blank? '特殊情况': map[status];
}
}

使用前记得在模块的

declarations

声明，或者导到共享模块，在共享模块中导出去。使用如下：

{{ "ALL" | cancelStatus }}  // 全部
{{ "ALL" | cancelStatus: true }}  // 特殊情况

Angular内置了一些管道：

// 日期 DatePipe
{{ expression | date:"MM/dd/yy" }}

// 数字 DecimalPipe,digitInfo的组成 {minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
// minIntegerDigits：整数部分保留最小的位数，默认值为1.
// minFractionDigits：小数部分保留最小的位数，默认值为0.
// maxFractionDigits：小数部分保留最大的位数，默认值为3.
{{ expression | number[:digitInfo] }}

// 大写
{{ expression | uppercase }}

// 小写
{{ expression | lowercase }}