![Angular 2 Tutorial](/angular2/images/angular2-mini-logo.jpg)
- Angular 2 教程
- Angular 2 - 首页
- Angular 2 - 概述
- Angular 2 - 环境
- Angular 2 - Hello World
- Angular 2 - 模块
- Angular 2 - 架构
- Angular 2 - 组件
- Angular 2 - 模板
- Angular 2 - 指令
- Angular 2 - 元数据
- Angular 2 - 数据绑定
- 使用HTTP进行CRUD操作
- Angular 2 - 错误处理
- Angular 2 - 路由
- Angular 2 - 导航
- Angular 2 - 表单
- Angular 2 - CLI
- Angular 2 - 依赖注入
- Angular 2 - 高级配置
- Angular 2 - 第三方控件
- Angular 2 - 数据显示
- Angular 2 - 事件处理
- Angular 2 - 数据转换
- Angular 2 - 自定义管道
- Angular 2 - 用户输入
- Angular 2 - 生命周期钩子
- Angular 2 - 嵌套容器
- Angular 2 - 服务
- Angular 2 有用资源
- Angular 2 - 常见问题解答
- Angular 2 - 快速指南
- Angular 2 - 有用资源
- 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 − 这是分配给自定义管道的类的名称。
Transform − 这是用于处理管道的函数。
Parameters − 这些是传递给管道的参数。
Returntype − 这是管道的返回类型。
让我们创建一个自定义管道来乘以两个数字。然后,我们将在组件类中使用该管道。
步骤 1 − 首先,创建一个名为 multiplier.pipe.ts 的文件。
![Multiplier](/angular2/images/multiplier.jpg)
步骤 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](/angular2/images/multiplier_output.jpg)
广告