溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
管道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);
}
}
如代碼所示，
注意：當定義完成后，不要忘記在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等）或者對象的引用發生變化。該管道會忽略對象內部的變化，在示例中，數組的引用沒有發生改變，改變的只是數組內部的數據，所以當我們添加數據時并沒有立即響應在頁面上。
非純管道會在組件的變更檢測周期中執行，而且會對對象的內部數據進行檢測。
在我們的示例中將管道變更為非純管道是非常賤簡單的，只要在管道元數據中將添加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);
}
}
這樣每當我們添加新用戶時，數據就會馬上響應在頁面上了。
在根模塊聲明的pipe在頁面中引用有效，而在頁面中引用的component中的模板則無效，這也是令我困惑的地方...
尋求了一些解決方案，大多是要注意得在根模塊中聲明，于是我做了個嘗試，將組件也寫成一個功能模塊，并在組件功能模塊中申明pipe，結果很欣喜，組件中的pipe生效了。
具體操作方法：
只需新建組件功能模塊，并在改模塊中申明pipe，myComponent.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { myComponent } from 'myComponent.ts';
import { HelloPipe } from "hello.pipe.ts";
@NgModule({
declarations: [
myComponent,
HelloPipe
],
imports: [
IonicPageModule.forChild(myComponent)
],
exports: [
myComponent
]
})
export class MyComponent {}
大功告成，組件的模板引用pipe得以生效.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
