angular管道

管道的作用就是将原始值进行转化处理，转换为所需要的值；

一、内置管道

 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 }}