Angular 中 Pipe(管道) 与 Angular 1.x 中的 filter(过滤器) 的作用的是一样的。它们都是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。
内建管道及分类
- String -> String
- UpperCasePipe
- LowerCasePipe
- TitleCasePipe
- Number -> String
- DecimalPipe
- PercentPipe
- CurrencyPipe
- Object -> String
- JsonPipe
- DatePipe
- Tools
- SlicePipe
- AsyncPipe
- I18nPluralPipe
- I18nSelectPipe
内建管道使用示例
大写转换
----- -- ------------------- --------- - --------- ------ ----- --------- - --------- ------ ---- ------- ------- --- ------
小写转换
----- -- ------------------- --------- - --------- ------ ----- --------- - --------- ------ ---- ------- ------- --- ------
数值格式化
----- -- ------------------- ---------- - ------- ------- ------ ----- ---------- - ------- ------- ------ ---- ------- ------ --- ------
日期格式化
----- -- ------------------- ----- - ----- ----------- ------ ----- ----- - ----- ----------- ------ ---- ------- ------------------ -- --- ------
JavaScript 对象序列化
----- -- ------------------- - ----- ----------- - - ---- ------ ----- - ----- ----------- - - ---- ------ ---- ------- - ------- ----------- - --- ------
管道参数
管道可以接收任意数量的参数,使用方式是在管道名称后面添加 :
和参数值。如 number: '1.4-4'
,若需要传递多个参数则参数之间用冒号隔开,具体示例如下:
----- -- ------------------- ----------- - --------- ------ ----- ----------- - --------- ------ ---- ------- --- --- ------
管道链
我们可以将多个管道连接在一起,组成管道链对数据进行处理。
----- -- ------------------- ----------- - --------- - --------- ------ ----- ----------- - --------- - --------- ------ ---- ------- --- --- ------
完整示例
------ - --------- - ---- ---------------- ------------ --------- --------- --------- - ----- -- ------------------- --------- - --------- ------ ----- --------- - --------- ------ ------ ----- -- ------------------- --------- - --------- ------ ----- --------- - --------- ------ ------ ----- -- ------------------- ---------- - ------- ------- ------ ----- ---------- - ------- ------- ------ ------ ----- -- ------------------- ----- - ----- ----------- ------ ----- ----- - ----- ----------- ------ ------ ----- -- ------------------- - ----- ----------- - - ---- ------ ----- - ----- ----------- - - ---- ------ ------ ----- -- ------------------- ----------- - --------- ------ ----- ----------- - --------- ------ ------ ----- -- ------------------- ----------- - --------- - --------- ------ ----- ----------- - --------- - --------- ------ ------ -- -- ------ ----- ------------ - ----- - --- ------- -
自定义管道
自定义管道的步骤:
- 使用
@Pipe
装饰器定义 Pipe 的 metadata 信息,如 Pipe 的名称 - 即 name 属性 - 实现
PipeTransform
接口中定义的 transform 方法
WelcomePipe 定义
------ - ----- ------------- - ---- ---------------- ------- ----- --------- -- ------ ----- ----------- ---------- ------------- - ---------------- -------- ------ - ---------- ------ ------ ------ ----- --- --------- - ----- --- -------------- ---- -------- --- -------------- - ------ -------- -- - - ------ - -
WelcomePipe 使用
----- -- ------------------- ----------- - ------- ------ ----- ----------- - ------- ------ ---- ------- ------- -- --------- --- ------
当 WelcomePipe 的输入参数,即 value 值为非字符串时,如使用 123,则控制台将会抛出以下异常:
---------- ----- -- -------------- ----- ------------ - ------ ------------- ------ --- ------- ---- -------- --- -----------
RepeatPipe 定义
------ ------ -------------- ---- ---------------- ------------ ---------- ------ ----- ---------- ---------- ------------- - ---------------- ---- ------ ------- - ------ -------------------- - -
RepeatPipe 使用
----- -- ------------------- ---- - -------- ------ ----- ---- - -------- ------ ---- ------- ------ --- ------
管道分类
- pure 管道:仅当管道输入值变化的时候,才执行转换操作,默认的类型是
pure
类型。(备注:输入值变化是指原始数据类型如:string、number、boolean 等的数值或对象的引用值发生变化) - impure 管道:在每次变化检测期间都会执行,如鼠标点击或移动都会执行
impure
管道
总结
本文介绍了 Angular 中的常用内建管道的用法和管道的分类,同时也介绍了 pure 和 impure 管道的区别。 此外我们通过两个示例展示了如何自定义管道,最后详细分析了 RepeatPipe
管道的工作原理。建议读者更改 RepeatePipe
的 pure 属性为 false,体验一下 impure 管道。