Angular 2 - 自定义管道

Angular 2自定义管道 - 从简单和简单的步骤学习Angular 2，从基本到高级概念，包括概述，环境，Hello World，模块，架构，组件，模板，指令，元数据，数据绑定，使用HTTP的CRUD操作，错误处理，路由，导航，表单，CLI，依赖注入，高级配置，第三方控件，数据显示，处理事件，转换数据，自定义管道，用户输入，生命周期挂钩，嵌套容器，服务。

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: 'Multiplier: {{2 | Multiplier: 10}}
' }) 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模块.
我们还需要确保它包含在声明部分中.

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

乘数输出