在 Angular 中，过滤器也叫管道。它最重要的作用就是用来格式化数据的输出。
举个简单例子：

  1. currentTime=new Date();
  1. <h1>{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</h1>

一、内置过滤器

Angular 一共内置了一些过滤器：https://angular.io/api?type=pipe。

  1. //货币转换 currency
  2. {{123 | currency }}  //$123
  3. {{123 | currency:'￥' }}  //￥123
  5. //格式化时间 date
  6. {{new Date() | date:'yyyyMMdd'}}  //2016/11/02
  7. yyyy/yy : 2016 / 16（年）
  8. MM： 11  （月）
  9. dd：02 （日）
  10. h/hh : 8 / 08 （时）
  11. m/mm : 5 / 05 （分）
  12. s /ss : 9 /09（秒）
  13. EEEE/EEE :（星期）
  15. //filter
  16. filter可以将一个数组，对象，函数，字符串中选择满足条件的子集，并返回一个新数组 
  17. {{arr | filter:'s'}}  //选出arr数组中带 ‘s’的项 
  19. //json
  20. 将JavaScript对象转为json对象
  21. {{{name:'jack'} | json}} // {"name":"jack"}
  23. //截取字符串和数组 limitTo
  24. str : "abcdefg"
  25. {{ str |limitTo:1 }}
  26. 1可为负值：当为负值的时候从后向前截取
  28. //将字符串数字转为数字 number
  29. {{'123.134545'| number:4}} //保留4位小数 四舍五入   默认保留3位小数
  31. //uppercase lowercase
  32. 将英文字母转为大写或小写。
  33. {{ 'Hello' | uppercase  }}  //HELLO
  34. {{'Hello' | lowercase}}  //hello
  36. //orderBy 数组排序
  37. 默认： 正序（1-9  a-z）
  38. 传参数： 按指定参数的顺序排列
  39. {{arr | orderBy:age}}

二、自定义过滤器

在复杂业务场景中，内置的过滤器肯定是不够用的，所有 Angular 也支持自定义过滤器。
https://angular.io/guide/pipes

  1. //自定义过滤器
  2. ng generate pipe msgformat
  4. //msgformat.pipe.ts
  5. import { Pipe, PipeTransform } from '@angular/core';
  7. @Pipe({
  8.   name: 'msgformat'
  9. })
  10. export class MsgformatPipe implements PipeTransform {
  11.   transform(value: string, ...args: unknown[]): unknown {
  12.     return value.split('').reverse().join('');;
  13.   }
  14. }
  16. //使用
  17. <div>{{"123"|msgformat}}</div>