管道（Pipe）是 Angular2 中用来格式化和修改数据的功能模块。在前端开发中，数据的处理和展示是很重要的一部分，但是有些数据需要经过一些处理才能得到我们想要的结果，这时候，管道就派上用场了。
管道可以在HTML模板中直接使用，也可以通过 TypeScript 代码中引入，这样就可以对数据进行一些比较复杂的处理，省去了频繁的代码编写。
常见管道类型
字符串类型
在管道中，字符串类型是最常用的一种类型。常见的字符串处理管道如下：
- uppercase：将字符串转换为大写形式；
- lowercase：将字符串转换为小写形式；
- titlecase：将字符串转换为首字母大写形式；
- slice：从字符串中选择一个子字符串；
- date：将日期格式化为字符串形式。
数组类型
在管道中，数组类型也很常用。常见的数组处理管道如下：
- filter：筛选数组元素；
- map：将数组元素转换为新的值；
- slice：选择数组的一部分元素；
- sort：对数组进行排序；
- reduce：使用指定的函数将数组元素归纳为单个值。
管道的使用
下面是一个使用 Angular2 管道的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------- ----- - --------- ------
--------- ----- - -------------- ------
-
--
------ ----- ------------ -
----- - ------ -------
----- - --- -------
-上面的示例展示了如何将字符串的首字母转换为大写，以及如何将日期格式化为符合要求的形式。
自定义管道
在 Angular2 中，也可以定制自己的管道，方便自己的业务需求。下面是一个示例：
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
------------ ----------
------ ----- ---------- ---------- ------------- -
---------------- ------- --------- -------- ------ -
----- --- - ---------------------
------ --------------- ---------- - - - -----
-
-上面的示例展示了如何自定义一个管道，实现一个数字的平方处理操作。可以通过在 HTML 中添加 |square 来使用该管道。
总结
管道是 Angular2 中比较重要的一个功能模块，可以方便地对数据进行多层次、复杂的格式化和修改处理。常见的数据处理例如字符串、数组类型都有对应的管道，也可以定制自己的管道来满足需要。希望本文对于初学者理解 Angular2 中的管道有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65923148eb4cecbf2d713361