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 管道。