angular-自定义管道

7次阅读

共计 623 个字符,预计需要花费 2 分钟才能阅读完成。

1. 新建 ts 文件
2. 引入 Pipe,PipeTransform
import {Pipe, PipeTransform} from ‘@angular/core’;
Pipe 是“管道元数据(pipe metadata)”装饰器的类。
PipeTransform 是 用来实现 transform 方法
3. 实现
1> import {Pipe, PipeTransform} from ‘@angular/core’;
2> @Pipe({name: ‘guandao’}) // 装饰器 定义管道的名字
3>export class GuandaoPipe implements PipeTransform// 类声明实现 PipeTransform
4>transform 方法
transform(value: string): string {

return value

}
// 接受参数 可多个
5> 再入口文件 进行引入
import {GuandaoPipe} from ‘ 文件路径 ’;
declarations:[GuandaoPipe]
exports:[GuandaoPipe]
6> html 使用
<p>{{msg | guandao}}</p>
如果需要传入参数
<p>{{msg | guandao:arg1:agr2}}</p>
transform(value:string,arg:string,arg:string)

value 就是 html 里面的 msg arg1,arg 就是增加的参数
这样就可以在 transform 中写入自己想要的逻辑 来实现管道

正文完
 0