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

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！