【Angular】07管道pipe

1、概念

管道的作用就是传输。不同的管道具有不同的作用。(其实就是处理数据)
angular中自带的pipe函数

2、用法

• {{ 输入数据 | 管道 : 管道参数}} (其中‘|’是管道操作符)
• 链式管道 {{ 输入数据 | date | uppercase}}
• 管道流通方向自左向右，逐层执行

使用脚手架命令：ng g p pipes/test 在pipes文件夹下创建test管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'test'
})
export class TestPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    // return null;
    return '>>>'+value+'>>>';
  }
}

export class STHomeComponent{
  dateStr: Date = new Date();
  nameStr: string = 'hEllo';
}
// 渲染结构
{{dateStr}}
<p>{{dateStr | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{nameStr | uppercase | lowercase}}</p>
<p>{{nameStr | test}}</p> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21