跳至正文
首页 » 博客 » Step by Step creating Custom Pipe in Angular

Step by Step creating Custom Pipe in Angular

Angular pipes将数据作为输入并将其转换为所需的输出。例如，使用插值显示产品的名称。现在，您希望产品名称始终以大写形式显示。你可以使用角管道大写做到这一点。

从 “@ angular/core” 导入 { Component，OnInit}； @ Component({'app-root' 选择器，模板 “{{productName | 大写}}”})AppComponent导出类 {productName = “ 板球 ”；}

在上面的组件中，productName将以大写字母显示。因此，管道接受输入并将其转换为所需的输出，如下所示:

角库为我们提供了许多内置的管道，

  • UpperCasePipe
  • LowerCasePipe
  • CurrencyPipe
  • PercentPipe
  • DatePipe等.

让我们看看如何使用内置的货币管道。

从 “@ angular/core” 导入 { Component，OnInit}； @ Component({'app-root' 选择器，模板 “{{productName | 大写} = {{productPrice | currency}}”})AppComponent导出类 {productName = “ 板球 ”；productPrice = 990；}

您还可以使用冒号将参数传递给管道。您可以将输入传递给货币管道，如下所示:

从 “@ angular/core” 导入 { Component，OnInit}； @ Component({'app-root' 选择器，模板: “{{productName | 大写} = {{productPrice | 货币: 'CAD':'符号-窄':'4.2-2'}}})AppComponent导出类 {productName = “ 板球 ”；productPrice = 990；}

尽管Angular提供了许多默认管道，但在创建自定义管道时可能会有要求。创建自定义管道与创建函数一样简单。假设我们要创建一个管道，它将字符串中每个单词的首字母大写。

考虑下面的组件，

从 “@ angular/core” 导入 { Component，OnInit}；@ Component({'app-root' 选择器，模板: “”<ul * ngFor = '让n个名称'><li >{{ n.name }}</li></ul>' })AppComponent导出类 { 名称 = []；构造函数 () {这个 .names = 这个。getNames();}getNames() {返回 [{'name': 'dhananjay Kumar' },{'name': 'jason beres' },{'name': 'adam jafe'}];}}

此组件将打印名称如下:

现在我们要将名称中每个单词的首字母大写。为此，我们需要编写一个自定义管道。要创建管道，需要执行以下步骤:

  1. 创建一个类
  2. 实现pipettransform在类
  3. 实现转换功能

因此，您可以创建一个管道来大写第一个字符，如下面的清单所示:

从 “@ angular/core” 导入 { Pipe，pipettransform}； @ Pipe({ name: 'firstcharcateruppercase' })FirstCharacterUpperCase导出类实现pipettransform {transform(value: string, args: string []): any {如果 (!value) {返回值；}返回值。replace (/ \ w \ S */g，函数 (str) {返回str.charAt(0).toUpperCase() str.substr(1).toLowerCase()；});}}

如您所见，自定义管道只不过是一个接受输入参数并返回一些值的函数。您需要编写转换方法内的管道的所有逻辑。

要使用firstcharacteruppercase管道，首先需要在模块中声明它，如下所示:

从 “ ./FirstCharacterUpperCase.pipe' 导入 {firstcharacteruppercase} @ NgModule({声明: [AppComponent, FirstCharacterUpperCase],

接下来在组件上，你可以像下面这样使用它:

从 “@ angular/core” 导入 { Component，OnInit}；@ Component({'app-root' 选择器，模板: “”<ul * ngFor = '让n个名称'><li >{{ n.name | firstcharcateruppercase }}</li></ul>' })AppComponent导出类 { 名称 = []；构造函数 () {这个 .names = 这个。getNames();}getNames() {返回 [{'name': 'dhananjay Kumar' },{'name': 'jason beres' },{'name': 'adam jafe'}];}}

现在，您将在输出中获得大写字母中每个名称的第一个字符。

要总结:

  1. 自定义管道是类，它装饰有 @ Pipe
  2. Name属性 @ Pipe decorator定义名称的管道
  3. Pipe类应该实现pipettransform接口

它应该在transform方法中实现管道业务逻辑。

有两种类型的管道

  1. 无状态管道
  2. 有状态管道

我们在上面使用和创建的是无状态管道。它们是纯函数，接受输入并返回转换后的值。

有状态管道的实现很复杂，它们会记住它们转换的数据的状态。通常他们创建一个HTTP请求，存储响应，并显示输出。Angular内置异步管道是有状态管道的示例。在进一步的文章中，我们将学习创建自定义状态管道。

摘要

在这篇文章中，我们了解了Angular中的管道。管道将输入数据转换为所需的输出。Angular提供了许多内置管道; 但是，可能需要编写自定义管道。有两种类型的管道: 无状态管道和有状态管道。

喜欢这篇文章？

你有它!如果你喜欢这篇文章，请分享。此外，如果您还没有Infragistics Ignite UI for Angular组件签出，请务必这样做!他们有30个基于材料的Angular组件，可以帮助您更快地编写快速的web应用程序。

</p

标签: