Angular 2的管道Pipe

管道Pipe可以将数据作为输入，然后按照规则将其转换并输出。在Angular2中有许多内置的Pipe，比如DatePipe、UpperCasePipe和CurrencyPipe等。在这里我们主要介绍如何自定义Pipe。

1.定义管道(number.pipe.ts)

// 导入模块import {Pipe, PipeTransform} from "@angular/core";// 管道名称@Pipe({name: "numberPipe"})export class NumberPipe implements PipeTransform {  // 参数说明:  // value是在使用管道的时候,获取的所在对象的值  // 后面可以跟若干个参数  // arg: 自定义参数, 数字类型, 使用的时候, 使用冒号添加在管道名称后面  transform(value:number, arg:number) {    return value * 10 * arg;  }}

2、在app.module.ts主模块中引入管道
...import {Number} from "../pipe/number.pipe";@ngModule({    declarations: [        NumberPipe    ]})...
3、组件模板中使用
<alert>管道使用实例</alert><p>    <input type="text" [(ngModel)]="number" name="number" class="form-control"/></p><!-- 不仅获取当前值，而且传递了一个参数，使用冒号添加到后面 --><p>{{number | numberPipe:10}}</p>

示例

1. 管道定义

　　Pipe的定义如下代码所示：

import { PipeTransform, Pipe } from '@angular/core';/*users: Array<any> = [    { name: '1', id: 1 },    { name: '2', id: 2 },    { name: '3', id: 3 },    { name: '4', id: 4 },    { name: '5', id: 5 },    { name: '6', id: 6 }];*/@Pipe({ name: 'filterUser' })export class FilterUserPipe implements PipeTransform {    transform(allUsers: Array<any>, ...args: any[]): any {        return allUsers.filter(user => user.id > 3);    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如代码所示，

• 需要使用@Pipe来装饰类
• 实现PipeTransform的transform方法，该方法接受一个输入值和一些可选参数
• 在@Pipe装饰器中指定管道的名字，这个名字就可以在模板中使用。 
  注意：当定义完成后，不要忘记在Module的declarations数组中包含这个管道。

2. 管道使用

　　user.template.html实现如下所示：

<div>    <ul>        <li *ngFor="let user of (users | filterUser)">            {{user.name}}        </li>    </ul></div><button (click)="addUser()"> add new user</button>
1
2
3
4
5
6
7
8

　　user.component.ts实现如下所示：

import { Component } from "@angular/core";@Component({    templateUrl: './user.template.html',})export class EnvAppComponent {    id = 7;    users: Array<any> = [        { name: '1', id: 1 },        { name: '2', id: 2 },        { name: '3', id: 3 },        { name: '4', id: 4 },        { name: '5', id: 5 },        { name: '6', id: 6 }    ];    addUser() {        this.users.push({ name: this.id++, id: this.id++ })    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

　　在user.component.ts中初始了数据users和定义一个添加user的方法，在user.template.html中使用自定义管道filterUser。 
　　当启动应用时，可以发现只有id大于3的user被显示出来了。可是，当你点击按钮添加用户时，发现并没有什么反应，数据并没有改变。这是为什么呢？

3. 数据变更检测

　　在Angular2中管道分为两种：纯管道和非纯管道。默认情况下管道都是纯管道。 
　　纯管道就是在Angular检测到它的输入值发生了纯变更时才会执行管道。纯变更也就是说原始数据类型（如String、Number和Boolean等）或者对象的引用发生变化。该管道会忽略对象内部的变化，在示例中，数组的引用没有发生改变，改变的只是数组内部的数据，所以当我们添加数据时并没有立即响应在页面上。 
　　非纯管道会在组件的变更检测周期中执行，而且会对对象的内部数据进行检测。 
在我们的示例中将管道变更为非纯管道是非常贱简单的，只要在管道元数据中将添加pure标志为false即可。 
代码如下所示：

@Pipe({ name: 'filterUser', pure: false })export class FilterUserPipe implements PipeTransform {    transform(allUsers: Array<any>, ...args: any[]): any {        return allUsers.filter(user => user.id > 3);    }}
1
2
3
4
5
6

　　这样每当我们添加新用户时，数据就会马上响应在页面上了。