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

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

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

货币转换 currency

  1. {{123 | currency }} //$123
  2. {{123 | currency:'¥' }} //¥123


格式化时间 date

  1. {{new Date() | date:'yyyyMMdd'}} //2016/11/02
  2. yyyy/yy : 2016 / 16(年)
  3. MM 11 (月)
  4. dd02 (日)
  5. h/hh : 8 / 08 (时)
  6. m/mm : 5 / 05 (分)
  7. s /ss : 9 /09(秒)
  8. EEEE/EEE :(星期)


filter

filter可以将一个数组,对象,函数,字符串中选择满足条件的子集,并返回一个新数组

  1. {{arr | filter:'s'}} //选出arr数组中带 ‘s’的项

json

  1. JavaScript对象转为json对象
  2. {{{name:'jack'} | json}} // {"name":"jack"}

截取字符串和数组 limitTo

  1. str : "abcdefg"
  2. {{ str |limitTo:1 }}

1可为负值:当为负值的时候从后向前截取

将字符串数字转为数字 number

  1. {{'123.134545'| number:4}} //保留4位小数 四舍五入 默认保留3位小数

uppercase lowercase

将英文字母转为大写或小写。

  1. {{ 'Hello' | uppercase }} //HELLO
  2. {{'Hello' | lowercase}} //hello

orderBy 数组排序

默认: 正序(1-9 a-z)
传参数: 按指定参数的顺序排列

  1. {{arr | orderBy:age}}

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

自定义过滤器

ng generate pipe msgformat
//msgformat.pipe.ts

  1. import { Pipe, PipeTransform } from '@angular/core';
  2. @Pipe({
  3. name: 'msgformat'
  4. })
  5. export class MsgformatPipe implements PipeTransform {
  6. transform(value: string, ...args: unknown[]): unknown {
  7. return value.split('').reverse().join('');;
  8. }
  9. }
  1. //使用
  2. <div>{{"123"|msgformat}}</div>