Angular 2教程

Angular 2 - 自定义管道

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

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

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

其中，

'Pipename' : 这是管道的名称.
Pipeclass : 这是分配给自定义管道的类的名称.
转换 : 这是使用管道的功能.
参数 : 这是传递给管道的参数.
返回类型 : 这是管道的返回类型.

让我们创建一个将2个数字相乘的自定义管道.然后我们将在组件类中使用该管道.

步骤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'的Pipe.
创建一个名为MultiplierPipe的类，它实现了PipeTransform模块.
然后，变换函数将接受value和multiple参数，并输出两个数字的相乘.

第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 {}

以下代码需要注意以下事项.