管道的作用就是将原始值进行转化处理，转换为所需要的值；
一、内置管道
1 <h1>大小写转换</h1>
2 {{'HeLLO worLD' | uppercase}}
3 <!-- 转换为大写 -->
4 <br />
5 {{'HeLLO worLD' | lowercase}}
6 <!-- 转换为小写 -->
7 <br />
8
9 <h1>日期转换</h1>
10 {{today}}
11 <br />
12 {{today | date:"yyyy-MM-dd HH:mm:ss"}}
13 <br />
14 {{today | date:"yy-MM-dd HH:mm:ss"}}
15 <br />
16 {{today | date:"yyyy年MM月dd日 H时m分s秒"}}
17
18 <h1>保留小数位</h1>
19 <!-- 接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
20 保留2~4位小数 -->
21 <p>{{3.1415926 | number:'1.0-3'}}</p>
22
23 <h1>slice 及 管道链</h1>
24 {{ 'semlinker' | slice:1:3 | uppercase}}
效果：
二、自定义管道
命令： ng g pipe 管道名称
示例：
1 import { Pipe, PipeTransform } from '@angular/core';
2
3 @Pipe({
4 name: 'fixedWithParams'
5 })
6 export class FixedWithParamsPipe implements PipeTransform {
7 transform(value: number, bum: number): string {
8 return value.toFixed(bum);
9 }
10 }
11 // 作用：将小数保留指定小数点以字符串形式返回
示例：
1 import { Pipe, PipeTransform } from '@angular/core';
2
3 @Pipe({
4 name: 'sexValue'
5 })
6 export class SexValuePipe implements PipeTransform {
7
8 transform(value: unknown, ...args: unknown[]): unknown {
9 let sex='';
10 switch (value) {
11 case 'female':
12 sex='女';
13 break;
14 case 'male':
15 sex='男';
16 break;
17 default:
18 sex='不男不女';
19 break;
20 }
21 return sex;
22 }
23 } // 按照指定文本，返回对应性别
html:
1 <h1>自定义管道----带参数</h1>
2 {{3.1415926 | fixedWithParams:3}}
3 <h1>自定义管道----不带参数</h1>
4 {{'female11' | sexValue}}
效果：
说明：
-
同@Component({})和@NgModel({})一样，@Pipe({})代表这是一个管道，里面定义了一组元数据，用来告诉angular这个管道是如何工作的；管道使用不需要引入，定义好直接用就行了，因为已经在根组件中注册过了。
-
每一个自定义管道都需要实现PipeTransform接口， transform方法用来对传入的值进行一系列处理，最后转化为需要的值后return即可；
-
transform()方法参数格式 - transform(value: string, args1: any, args2: any): value为传入的值（即为需要用此管道处理的值， | 前面的值）; args 为传入的参数(?:代表可选)；
-
html中使用管道格式 - {{ 数据 | 管道名 : 参数1 : 参数2 }}