过滤器

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

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

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

货币转换 currency

{{123 | currency }}  //$123
{{123 | currency:'￥' }}  //￥123

格式化时间 date

{{new Date() | date:'yyyyMMdd'}}  //2016/11/02
yyyy/yy : 2016 / 16（年）
MM： 11  （月）
dd：02 （日）
h/hh : 8 / 08 （时）
m/mm : 5 / 05 （分）
s /ss : 9 /09（秒）
EEEE/EEE :（星期）

filter

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

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

json

将JavaScript对象转为json对象
{{{name:'jack'} | json}} // {"name":"jack"}

截取字符串和数组 limitTo

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

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

将字符串数字转为数字 number

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

uppercase lowercase

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

{{ 'Hello' | uppercase  }}  //HELLO
{{'Hello' | lowercase}}  //hello

orderBy 数组排序

默认： 正序（1-9 a-z）
传参数： 按指定参数的顺序排列

{{arr | orderBy:age}}

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

自定义过滤器

ng generate pipe msgformat
//msgformat.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'msgformat'
})
export class MsgformatPipe implements PipeTransform {
  transform(value: string, ...args: unknown[]): unknown {
    return value.split('').reverse().join('');;
  }
}

//使用
<div>{{"123"|msgformat}}</div>