如何在 AngularJS 中创建自定义管道？

在本文中，我们将学习如何生成自定义管道，而不是在 Angular 中使用内置管道，并探索其实现。 Pipe 是一个函数，用于在将数据呈现给用户之前对其进行修改。一些预先构建的管道是日期、大写、小写、货币、小数、数字等。Angular 有一个名为数据绑定的强大功能，它可以帮助我们将类属性绑定到 HTML 元素属性。有时，我们需要在显示给用户之前显示正确格式化的数据。例如，如果我们需要打印日期，那么可能会打印出与用户无关的长格式日期。出于这个原因，管道用于在数据显示在浏览器上之前转换数据。我们可以使用管道更改属性值，以使它们更加用户友好或适合特定区域。我们可以假设管道是可以接受参数、执行计算并返回一些东西的函数。管道将字符串、整数、日期和数组作为输入值，用 '|' 分隔后跟管道名称并返回格式化结果。通过包含冒号和参数值来定义参数。为了保存文件，我们需要将它保存为.pipe.ts 。在组件模板表达式中使用管道显示转换后的值的语法如下：

句法：

{{ inputValue | pipename : parameter }}

但是，我们可能会遇到想要在数据转换中添加更复杂功能的情况。出于这个原因，Angular 提供了自定义管道。自定义管道可用于各种用例，例如格式化电话号码、突出显示搜索结果关键字、返回数字的平方等。要生成自定义管道，我们可以遵循两种方式：

• 通过为管道创建单独的文件，我们必须使用组件文件手动设置和配置管道函数并需要将其导入模块文件。
• 通过使用 Angular CLI，它将自动在组件和模块文件中设置所有必要的配置。

我们将依次通过示例来理解这两种方法。

方法一：让我们按照步骤手动生成自定义管道：

第 1 步：构造一个实现 PipeTransform 接口的类。确保导出该类，以便其他组件可以使用它来导入管道。使用 UpperCamelCase 写管道类的名称。在此示例中，我们将类命名为ArbitraryPipe 。

export class ArbitraryPipe implements PipeTransform {}

第 2 步： PipeTransform 接口有一个 transform 方法。在 transform 方法中，我们编写代码来转换并返回一个值。在这种情况下，我们要传入要替换为空格的字符。方法返回类型也定义为字符串，因为我们返回的是转换后的字符串。

export class ArbitraryPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ' ');
  }
}

第 3 步：要使类成为管道，请向其添加管道装饰器。这是一个函数，所以我们像其他装饰器一样添加括号。管道的名称在传递给函数的对象中指定。管道的名称将在模板中使用。

@Pipe({
  name: 'arbitrary'
})
export class ArbitraryPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ' ');
  }
}

第 4 步：从@angular/core导入 pipe 和 pipeTransform 以便我们可以分别使用这些模块中的 pipe 装饰器和 pipeTransform 接口。

arbitrary.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
  
@Pipe({
  name: 'arbitrary'
})
export class ArbitraryPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ' ');
  }
}

第 5 步：现在让我们在组件模板中使用我们的任意管道。只需将管道和管道名称添加到模板即可使用任意管道。使用冒号分隔转换所需的任何参数。 transform 方法的第一个参数是要转换的值，在本例中是我们的 productCode。这是我们的管道名称。冒号表示管道参数，因此我们的破折号作为转换方法的第二个参数提供。然后根据方法的逻辑对传入的值进行转换，并返回并显示更改后的字符串。

app.component.html

Product code without using custom pipe is {{productCode}} 
  
Product code using custom pipe is {{productCode | arbitrary:'-'}} 

Step 6 :在这种情况下，我们需要在模块文件中导入 ArbitraryPipe，同时将我们的任意管道添加到app.module.ts文件中@NgModule 的声明数组中，以便在 AppModule 中声明它。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { ArbitraryPipe } from './arbitrary.pipe';
  
@NgModule({
  declarations: [AppComponent, ArbitraryPipe],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

我们的app.component.ts文件如下所示：

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  productCode = '200-300';

输出：

方法 2：在这种情况下，我们将使用 Angular CLI 生成管道，Angular CLI 将负责我们在第一种方法中执行的所有配置设置，即，它将自动导入随机管道并将其包含在声明中数组，还要配置random.pipe.ts 文件。要生成管道，我们遵循以下命令：

ng generate pipe random

此命令将生成一个名为random.pipe.ts的文件，其中包含用于在应用程序根级别实现自定义管道的示例代码。它还将构建一个用于编写单元测试的规范文件并修改 app.module.ts 中的引用。

随机管道.ts

import { Pipe, PipeTransform } from '@angular/core';
  
@Pipe({
  name: 'random'
})
export class RandomPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ': ');
  }
}

我们的app.component.ts文件如下所示：

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'GeeksforGeeks -  a computer science portal for geeks ';
}

我们可以在 HTML 模板中使用管道声明。

app.component.html

Without using custom pipe: 
{{name}}
With using custom pipe:
{{name | random: '-'}}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { RandomPipe } from './random.pipe';
  
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, RandomPipe],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出：运行ng serve命令后，将显示以下输出。