angular-管道
管道的作用就是将原始值进行转化处理，转换为所需要的值；
一、内置管道
1 大小写转换
2 {{'HeLLO worLD' | uppercase}}
3
4
5 {{'HeLLO worLD' | lowercase}}
6
7
8
9 日期转换
10 {{today}}
11
12 {{today | date:"yyyy-MM-dd HH:mm:ss"}}
13
14 {{today | date:"yy-MM-dd HH:mm:ss"}}
15
16 {{today | date:"yyyy年MM月dd日 H时m分s秒"}}
17
18 保留小数位
19
21 {{3.1415926 | number:'1.0-3'}}
22
23 slice 及 管道链
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 自定义管道----带参数
2 {{3.1415926 | fixedWithParams:3}}
3 自定义管道----不带参数
4 {{'female11' | sexValue}}
效果：
说明：
-
同@Component({})和@NgModel({})一样，@Pipe({})代表这是一个管道，里面定义了一组元数据，用来告诉angular这个管道是如何工作的；管道使用不需要引入，定义好直接用就行了，因为已经在根组件中注册过了。
-
每一个自定义管道都需要实现PipeTransform接口， transform方法用来对传入的值进行一系列处理，最后转化为需要的值后return即可；
-
transform()方法参数格式 - transform(value: string, args1: any, args2: any): value为传入的值（即为需要用此管道处理的值， | 前面的值）; args 为传入的参数(?:代表可选)；
-
html中使用管道格式 - {{ 数据 | 管道名 : 参数1 : 参数2 }}