Angular 2 - 自定义管道



Angular 2 还具有创建自定义管道的功能。定义自定义管道的一般方法如下。

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
} 

其中,

  • 'Pipename' − 这是管道的名称。

  • Pipeclass − 这是分配给自定义管道的类的名称。

  • Transform − 这是用于处理管道的函数。

  • Parameters − 这些是传递给管道的参数。

  • Returntype − 这是管道的返回类型。

让我们创建一个自定义管道来乘以两个数字。然后,我们将在组件类中使用该管道。

步骤 1 − 首先,创建一个名为 multiplier.pipe.ts 的文件。

Multiplier

步骤 2 − 将以下代码放在上面创建的文件中。

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
} 

关于以上代码,需要注意以下几点:

  • 我们首先导入 Pipe 和 PipeTransform 模块。

  • 然后,我们创建一个名为“Multiplier”的管道。

  • 创建一个名为 MultiplierPipe 的类,该类实现 PipeTransform 模块。

  • 然后,transform 函数将接收值和多个参数,并输出这两个数字的乘积。

步骤 3 − 在 app.component.ts 文件中,放置以下代码。

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  } 

注意 − 在我们的模板中,我们使用了新的自定义管道。

步骤 4 − 确保在 app.module.ts 文件中放置以下代码。

import {
   NgModule
} from '@angular/core';

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

关于以上代码,需要注意以下几点:

  • 我们需要确保包含我们的 MultiplierPipe 模块。

  • 我们还需要确保它包含在 declarations 部分。

保存所有代码更改并刷新浏览器后,您将获得以下输出。

Multiplier Output
广告