管道Pipe可以将数据作为输入，然后按照规则将其转换并输出。在Angular2中有许多内置的Pipe，比如DatePipe、UpperCasePipe和CurrencyPipe等。在这里我们主要介绍如何自定义Pipe。
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);
}
}
如代码所示，
- 需要使用@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>
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++ })
}
}
在user.component.ts中初始了数据users和定义一个添加user的方法，在user.template.html中使用自定义管道filterUser。
当启动应用时，可以发现只有id大于3的user被显示出来了。可是，当你点击按钮添加用户时，发现并没有什么反应，数据并没有改变。这是为什么呢？
3. 数据变更检测
在Angular2中管道分为两种：纯管道和非纯管道。默认情况下管道都是纯管道。
纯管道就是在Angular检测到它的输入值发生了纯变更时才会执行管道。纯变更也就是说原始数据类型（如String、Number和Boolean等）或者对象的引用发生变化。该管道会忽略对象内部的变化，在示例中，数组的引用没有发生改变，改变的只是数组内部的数据，所以当我们添加数据时并没有立即响应在页面上。
非纯管道会在组件的变更检测周期中执行，而且会对对象的内部数据进行检测。