在 Angular 中，管道（Pipe）是一种用来转换输入数据并输出格式化后后的数据的工具。它们可以在模板中使用，用来改变数据的展示形式。Angular 内置了许多管道，开发者也可以自己创建自己的管道来满足特定的需求。
内置管道
Angular 内置了一些常用的管道，例如日期格式化管道、货币格式化管道等等。在应用程序中使用这些管道非常方便，只需要按照如下方式引入即可：
<p> 今天是{{ today | date:'yyyy年MM月dd日' }}。 </p> <!-- 输出：今天是2021年11月18日。 -->
上面的代码中，我们使用了内置的 date 管道，将变量 today 的值进行了格式化，输出了当前日期。类似的，我们也可以使用内置的货币格式化管道 currency：
<p> 商品价格为 {{ productPrice | currency:'CNY':'symbol':'2.2-2' }}。 </p> <!-- 输出：商品价格为 ¥12.00。 -->
这里我们用到了内置的 currency 管道，格式化商品价格为人民币，并指定了小数点后保留 2 位、每三位数字使用逗号分隔。
自定义管道
除了使用内置管道，我们也可以创建自定义管道来处理我们的数据。下面是一个自定义管道的例子，用来将字符串转换为大写：
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'toUpper' }) export class ToUpperPipe implements PipeTransform { transform(value: string): string { return value.toUpperCase(); } }
上面的代码中，我们使用 @Pipe 装饰器来指定管道的名称为 toUpper，并实现了 PipeTransform 接口的 transform 方法，这个方法将输入的字符串转换为大写并返回。
我们可以使用这个自定义管道的方式就像使用内置管道一样，只需要在模板中按照如下方式调用即可：
<p> {{ 'hello world' | toUpper }} </p> <!-- 输出：HELLO WORLD。 -->
当然，我们也可以添加参数来实现管道的更多功能。例如下面的自定义管道用来将阿拉伯数字转换为中文数字：
-- -------------------- ---- ------- ------ - ----- ------------- - ---- ---------------- ------- ----- ----------------- -- ------ ----- ------------------- ---------- ------------- - ---------------- ------- --------- - ---------- ------- --- ------ - ----- ------- - ----- ---- ---- ---- ---- ---- ---- ---- ---- ----- ----- ----- - ---- ---- ---- ---- ---- ----- ----- ----- - ------------------ -- ------ --- ------- - --- -- ------ --- -- - ------- - ----------- - ---- - --- ---- - ------ --- --------- - -- ----- ----- - -- - ----- ----- - ---- - --- -- ------ - -- - -- ------ --- - -- --------- --- - -- ----- -- --- - ------- - ---------------- - -------- - ---- - ------- - -------------- - ---------------- - -------- - - ---- -- ---------- --- -- - ------- - ---------------- - -------- - ---- - --------------- - ---- ------------ - - ------ ----- - --------------------- - -------- - -展开代码
这个自定义管道可以通过 options 参数来指定是否使用大写数字。我们可以按照如下方式调用：
<p> {{ 12345 | toChineseNumber:{ uppercase: true } }} </p> <!-- 输出：壹万二仟叁佰肆拾伍。 -->
用法与指导意义
管道是一种非常有用的 Angular 工具，它可以方便地实现数据的格式化。我们不仅可以使用内置的管道，还可以自己创建自定义的管道来满足特定的需求。在实际开发中，我们经常需要在前端处理数据并将之展示，例如将日期格式化、货币格式化等等，这时候管道就会非常方便。
值得注意的是，在使用管道时需要考虑到性能的问题。过多的管道可能会导致应用程序的性能下降，因此在实际开发中，我们需要谨慎地选择并使用管道。另外，在创建自己的管道时，也需要注意代码的可维护性和可拓展性，以便后续的开发和维护。
总之，在 Angular 中学习和使用管道是非常有意义的，相信它会对你的前端开发技能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b99e0d306f20b3a68110fe
