管道Pipe可以將數(shù)據(jù)作為輸入，然后按照規(guī)則將其轉(zhuǎn)換并輸出。在Angular2中有許多內(nèi)置的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來裝飾類 實(shí)現(xiàn)PipeTransform的transform方法，該方法接受一個(gè)輸入值和一些可選參數(shù) 在@Pipe裝飾器中指定管道的名字，這個(gè)名字就可以在模板中使用。

注意：當(dāng)定義完成后，不要忘記在Module的declarations數(shù)組中包含這個(gè)管道。

2. 管道使用

user.template.html實(shí)現(xiàn)如下所示：

<div>  <ul>    <li *ngFor="let user of (users | filterUser)">      {{user.name}}    </li>  </ul></div><button (click)="addUser()"> add new user</button>

user.component.ts實(shí)現(xiàn)如下所示：

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中初始了數(shù)據(jù)users和定義一個(gè)添加user的方法，在user.template.html中使用自定義管道filterUser。

當(dāng)啟動(dòng)應(yīng)用時(shí)，可以發(fā)現(xiàn)只有id大于3的user被顯示出來了。可是，當(dāng)你點(diǎn)擊按鈕添加用戶時(shí)，發(fā)現(xiàn)并沒有什么反應(yīng)，數(shù)據(jù)并沒有改變。這是為什么呢？

3. 數(shù)據(jù)變更檢測

在Angular2中管道分為兩種：純管道和非純管道。默認(rèn)情況下管道都是純管道。

純管道就是在Angular檢測到它的輸入值發(fā)生了純變更時(shí)才會(huì)執(zhí)行管道。純變更也就是說原始數(shù)據(jù)類型（如String、Number和Boolean等）或者對(duì)象的引用發(fā)生變化。該管道會(huì)忽略對(duì)象內(nèi)部的變化，在示例中，數(shù)組的引用沒有發(fā)生改變，改變的只是數(shù)組內(nèi)部的數(shù)據(jù)，所以當(dāng)我們添加數(shù)據(jù)時(shí)并沒有立即響應(yīng)在頁面上。

非純管道會(huì)在組件的變更檢測周期中執(zhí)行，而且會(huì)對(duì)對(duì)象的內(nèi)部數(shù)據(jù)進(jìn)行檢測。

在我們的示例中將管道變更為非純管道是非常賤簡單的，只要在管道元數(shù)據(jù)中將添加pure標(biāo)志為false即可。