Angular2的管道Pipe的使用方法

管道pipe可以將資料作為輸入，然後按照規則將其轉換並輸出。在angular2中有許多內建的pipe，比如datepipe、uppercasepipe和currencypipe等。在這裡我們主要介紹如何自定義pipe。

1. 管道定義

pipe的定義如下**所示：

import from '@angular/core';

/*users: array = [

, ,

, ];*/

@pipe()

export class filteruserpipe implements pipetransform

}如**所示，

注意：當定義完成後，不要忘記在module的declarations陣列中包含這個管道。

2. 管道使用

user.template.html實現如下所示：

user.component.ts實現如下所示：

import from "@angular/core";

@component()

export class envappcomponent ,,,

];adduser() )

}}在user.component.ts中初始了資料users和定義乙個新增user的方法，在user.template.html中使用自定義管道filteruser。

當啟動應用時，可以發現只有id大於3的user被顯示出來了。可是，當你點選按鈕新增使用者時，發現並沒有什麼反應，資料並沒有改變。這是為什麼呢？

3. 資料變更檢測

在angular2中管道分為兩種：純管道和非純管道。預設情況下管道都是純管道。

純管道就是在angular檢測到它的輸入值發生了純變更時才會執行管道。純變更也就是程式設計客棧說原始資料型別（如string、number和boolean等）或者物件的引用發生變化。該管道會忽略物件內部的變化，在示例中，陣列的引用沒有發生改變，改變的只是陣列內部的資料，所以當我們新增資料時並沒有立即響應在頁面上。

非純管道會在元件的變更檢測週期中執行，而且會對物件的內部資料進行檢測。

在我們的示例中將管道變更為非純管道是非常賤簡單的，只要在管道元資料中將新增pure標誌為false即可。

**如下所示：

@pipe()

export class filteruserpipe implements pipetransform

}這樣每當我們新增新使用者時，資料就會馬上響應在頁面上了。

在根模組宣告的pipe在頁面中引用有效，而在頁面中引用的component中的模板則無效，這也是令我困惑的地方...

尋求了一些解決方案，大多是要注意得在根模組中宣告，於是我做了個嘗試，將元件也寫成乙個功能模組，並在元件功能模組中申明pipe，結果很欣喜，元件中的pipe生效了。

具體操作方法：

只需新建元件功能模組，並在改模組中申明pipe，mycomponent.module.ts

import from '@angular/corewww.cppcns.com';

import from 'ionic-angular';

import from 'mycomponent.ts';

import from "hello.pipe.ts";

@ngmodule()

export class mycomponen程式設計客棧t {}

大功告成，元件的模板引用pipe得以生效.

本文標題: angular2的管道pipe的使用方法

本文位址:

Angular2的管道Pipe的使用方法

angular2，Pipe管道初使用。

如何自定義Angular2 管道

angular2 發布angular2模組，服務

Angular2的管道Pipe的使用方法

angular2，Pipe管道初使用。

如何自定義Angular2 管道

angular2 發布angular2模組，服務

相關推薦