管道

类似vue的过滤器 filter

内置管道

内置管道api

<p>{{birthday | date}}</p>  //Jul 17, 2019
<p>{{birthday | date:'yyyy-MM-dd'}}</p>  //2019-07-17
<p>{{name | uppercase}}</p> //ZLB
<p>{{name | uppercase | lowercase}}</p> //zlb

自定义管道

ng g pipe test 快速生成

auth=[1,2,3];
<li *ngFor="let item of auth">{{item |test}}</li>
管理员
客服
普通用户

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
  name: 'test'
})
export class TestPipe implements PipeTransform {
  transform(value: number, ...args: any[]): any {
    switch (value) {
      case 1:
        return '管理员';
        break;
      case 2:
        return '客服';
        break;
      case 3:
        return '普通用户';
        break;
    }
  }
}

在app.modules中的declarations引入TestPipe