Angular pipe管道的解释与用法

2,305 阅读1分钟

如何新建一个Pipe?

在文件夹里执行命令

ng generate pipe name --flat

该命令会在文件夹里创建一个 xxxx.pipe.ts的文件和一个xxxx.pipe.spec.ts文件.
spec.ts文件用来测试,使用不到。逻辑写在pipe.ts中。下面是一个例子。

根据业务需求,在管道里写逻辑。
transform函数是自动生成,其中包含两个参数(value: any,和args?: any)value类型可以重定义,如果类型不对,代码检查器会检查出来,value的值就是管道前面变量的原始值,args是一个可选参数,相当于配置项信息,args?可以传多个值。
下面说一下用法:
Angular有一些原生的一些管道方法:例如:| date | uppercase 等等. 详情见 Pipe
用法与angular原生的用法一致,在你的模板上 使用 | dialogStatus2Value:'params'。就可以了。

还需要提一点: 如果使用angular模块里自带的pipe如date,其参数类型一定不能错误, 比如{{time | date: yyyy-MM-DD HH: mm ss''}}中的time 一定要是number|| Date 不能是string,不然angular会抛出一个错误。
end。