在 Angular 中，管道（Pipe）是用于转换数据的一种方式。虽然 Angular 内置了一些常用的管道，但是有时候我们需要自定义管道来满足自己的需求。本文将介绍如何在 Angular 6.x 中通过服务创建自己的 Pipe。
什么是 Pipe
在 Angular 中，管道（Pipe）是用于转换数据的一种方式。管道可以接受一个或多个参数，并根据这些参数对输入数据进行转换。例如，Angular 内置的 date 管道可以将日期对象格式化为不同的字符串形式。
创建自定义 Pipe
要创建自定义 Pipe，我们需要先创建一个 Angular 服务。服务是一个可注入的类，用于提供应用程序中的某些功能。我们可以通过依赖注入的方式在组件中使用服务。
在 Angular 中，我们可以使用 @Injectable() 装饰器来定义一个服务。例如，下面是一个简单的服务，它将输入的字符串转换为大写：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ---------------- -
---------------- -------- ------ -
------ --------------------
-
-接下来，我们可以使用 ng g pipe 命令来生成一个新的管道。例如，下面是一个简单的管道，它使用我们刚刚创建的服务将输入的字符串转换为大写：
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
------ - ---------------- - ---- -----------------------
-------
----- -----------
--
------ ----- ------------- ---------- ------------- -
------------------- ----------------- ----------------- --
---------------- -------- ------ -
------ ---------------------------------------
-
-在上面的代码中，我们使用 @Pipe 装饰器来定义一个管道。name 属性用于指定管道的名称，我们可以在模板中使用这个名称来调用管道。PipeTransform 接口定义了一个 transform 方法，我们需要实现这个方法来完成数据转换。在这个例子中，我们使用 UpperCaseService 来实现数据转换。
在模板中使用自定义 Pipe
一旦我们创建了自定义 Pipe，我们就可以在模板中使用它了。例如，下面是一个简单的组件模板，它使用我们刚刚创建的管道将输入的字符串转换为大写：
<input [(ngModel)]="inputValue">
<p>{{ inputValue | upperCase }}</p>在上面的代码中，我们使用管道符 | 将输入的字符串传递给 upperCase 管道。管道会将输入的字符串转换为大写，并将结果显示在 <p> 元素中。
总结
在本文中，我们介绍了如何在 Angular 6.x 中通过服务创建自己的 Pipe。我们首先创建了一个服务来实现数据转换，然后创建了一个管道来使用这个服务完成数据转换。最后，我们在模板中使用管道来将输入的字符串转换为大写。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cb07d7add4f0e0ff4d0100