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

在这篇文章中，我们将学习如何在Angular中使用内置管道之外生成自定义管道，并探讨其实现。管道是一个函数，用于在向用户渲染数据之前对其进行修改。一些预置的管道包括日期、大写字母、小写字母、货币、小数、数字等。Angular有一个强大的功能，名为数据绑定，它可以帮助我们将类属性绑定到HTML元素属性上。有时，我们需要在向用户显示数据之前显示正确的格式。例如，如果我们需要打印日期，那么可能会出现打印出一个长格式的日期，这可能与用户无关。由于这个原因，在数据显示在浏览器上之前，管道被用来转换数据。我们可以使用管道来改变属性值，使其更方便用户使用或适合于特定区域。我们可以把管道当作可以接受参数、进行计算并返回东西的函数。管道将字符串、整数、日期和数组作为输入值，用”|”和管道名称分开，并返回格式化的结果。参数的定义包括一个冒号和参数的值。为了保存该文件，我们需要将其保存为<fileName>.pipe.ts 。在组件模板表达式中使用管道来显示转换后的值，其语法如下。

语法:

{{ inputValue | _pipename : parameter_ }}

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

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

我们将通过实例依次了解这两种方法。

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

第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接口。

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。这就是我们的管道名称。冒号表示一个管道参数，因此我们的破折号被作为转换方法的第二个参数提供。然后，传入的值按照方法的逻辑进行转换，改变后的字符串被返回并显示。

<h2>Product code without using custom pipe is {{productCode}} </h2>
  
<h2>Product code using custom pipe is {{productCode | arbitrary:'-'}} </h2>

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

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文件看起来像下面这样。

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

输出:

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

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

ng generate pipe random

该命令将生成一个名为random.pipe.ts的文件，其中包含在应用程序根层实现自定义管道的示例代码。它还将建立一个用于编写单元测试的规范文件，并修改app.module.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文件看起来像下面这样。

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模板中使用管道声明。

<h4>Without using custom pipe: </h4>
<h2>{{name}}</h2>
<h4>With using custom pipe:</h4>
<h2>{{name | random: '-'}}</h2>

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命令后，将显示以下输出。

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