Angular 2 自定义管道
Angular 2 还具有创建自定义管道的功能。定义自定义管道的一般方法如下。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'Pipename'})
export class Pipeclass implements PipeTransform {
transform(parameters): returntype { }
}
Where,
-
'管名' ： 这是管道的名称。
-
管道类 ：这是分配给自定义管道的类的名称。
-
转换 ： 这是与管道配合使用的功能。
-
参数 ： 这是传递给管道的参数。
-
返回类型 ： 这是管道的返回类型。
让我们创建一个将 2 个数字相乘的自定义管道。然后我们将在我们的组件类中使用该管道。
步骤 1 ：首先，创建一个名为multiplier.pipe.ts的文件。
步骤 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 模块。
-
然后变换函数将接受值和多个参数并输出两个数字的乘积。
步骤 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 模块。
-
我们还需要确保它包含在声明部分中。
保存所有代码更改并刷新浏览器后，你将获得以下输出。
