Angular 中的管道（Pipe）是一种从模板中接收值，并在处理后返回新值的方式。管道可以在模板中使用 | 符号进行调用。Angular 内置了许多常用的管道，如 DatePipe、UpperCasePipe 等，同时也支持开发者自定义管道来满足更特殊的需求。
本文将从以下方面对 Angular 中的管道进行详细介绍，包括管道的使用、内置管道和自定义管道的开发。
管道的使用
管道可以用在 Html 模板中的表达式当中，也可以在组件类中进行代码中进行使用。在 HTML 模板中，我们可以通过使用 | 符号连接一个或者多个管道来对一个表达式进行处理，如下：
<p>今天是{{ today | date }}。</p>上面的代码将会根据 DatePipe 的默认格式对 today 的值进行格式化，并展示在模板中。除了单个管道之外，我们还可以通过 | 符号连接多个管道来对值进行连续处理，从而达到更加复杂的内容输出。
在组件代码中使用管道需要使用 Angular 提供的 PipeTransform 接口来实现，该接口只有一个 transform 方法，需要开发者实现具体的管道功能。接下来我们来详细了解下管道的使用方法。
简单管道
在 HTML 模板中，我们可以直接使用 Angular 内置的管道，如 date pipe，currency pipe 等，需要开发者提供输入值和一些额外的参数来对值进行加工处理。下面是两个简单管道的示例代码。
Date Pipe
<p>今天是{{ today | date:'yyyy-MM-dd' }}。</p>上面的代码会使用 DatePipe 对 today 的值进行格式化，展示出类似于 "2021-08-08" 的日期格式。
Currency Pipe
<p>商品售价：{{ price | currency:'CNY':'symbol' }}</p>上面的代码会使用 CurrencyPipe 对 price 的值进行货币化处理。其中第一个参数指定要显示的货币代码，第二个参数指定货币符号的位置，第三个参数指定是否显示货币符号。比如上述代码会展示出类似于 "¥1500.00" 的价格值。
自定义管道
自定义管道可以满足开发者更特殊的业务需求。开发者可以通过实现 PipeTransform 接口来定义自己的管道功能。下面我们来看一个具体的自定义管道示例。
我们定义一个名为 ReversePipe 的管道，用于将字符串中的字符进行颠倒。
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
-------
----- ---------
--
------ ----- ----------- ---------- ------------- -
---------------- -------- ------ -
-- -------- -
------ ---
-
------ -----------------------------------
-
-上面的代码中，@Pipe 装饰器是 Angular 自带的，用于指定管道的名称。我们还需要在 ReversePipe 中实现 PipeTransform 接口的 transform 方法，该方法用于将输入值 value 进行处理并返回新的值。
在使用自定义管道时，我们需要确保将该管道加入到适当的 angular module 中，这样才能在项目中正确使用。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
-----------
------------- -
-----------
--
-------- -
-------------
--
---------- ---
--
------ ----- --------- - -上面的代码通过将 ReversePipe 加入到 AppModule 中来使它在整个项目中都可用。
内置管道
Angular 内置了许多常用管道，如 DatePipe、UpperCasePipe、LowerCasePipe 等。这些管道提供了一些常见的值处理方式，可以大大降低我们的开发成本。下面是几个常用管道的示例。
DatePipe
DatePipe 用于将日期值转换为指定格式的字符串。
<p>今天是{{ today | date:'yyyy-MM-dd' }}。</p>上面的代码会将 today 转换成 "2021-08-08" 的日期格式。
UpperCasePipe
UpperCasePipe 用于将字符串中的所有字符都转换为大写。
<p>{{ text | uppercase }}</p>上面的代码会将 text 的值转换为大写字母。
LowerCasePipe
LowerCasePipe 用于将字符串中的所有字符都转换为小写。
<p>{{ text | lowercase }}</p>上面的代码会将 text 的值转换为小写字母。
结论
管道是 Angular 中一个非常常用的功能，通过使用管道可以方便地对数据进行加工处理。除了 Angular 内置的常用管道外，开发者还可以自定义自己的管道来满足更复杂的需求。希望本文能够帮助读者更好地了解 Angular 中的管道。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6706ef19d91dce0dc863723b