管道Pipe可以將數(shù)據(jù)作為輸入,然后按照規(guī)則將其轉(zhuǎn)換并輸出。在Angular2中有許多內(nèi)置的Pipe,比如DatePipe、UpperCasePipe和CurrencyPipe等。在這里我們主要介紹如何自定義Pipe。
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括曹縣網(wǎng)站建設(shè)、曹縣網(wǎng)站制作、曹縣網(wǎng)頁制作以及曹縣網(wǎng)絡(luò)營(yíng)銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,曹縣網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到曹縣省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
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); } }
如代碼所示,
注意:當(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ù)變更檢測(cè)
在Angular2中管道分為兩種:純管道和非純管道。默認(rèn)情況下管道都是純管道。
純管道就是在Angular檢測(cè)到它的輸入值發(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ì)在組件的變更檢測(cè)周期中執(zhí)行,而且會(huì)對(duì)對(duì)象的內(nèi)部數(shù)據(jù)進(jìn)行檢測(cè)。
在我們的示例中將管道變更為非純管道是非常賤簡(jiǎn)單的,只要在管道元數(shù)據(jù)中將添加pure標(biāo)志為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); } }
這樣每當(dāng)我們添加新用戶時(shí),數(shù)據(jù)就會(huì)馬上響應(yīng)在頁面上了。
在根模塊聲明的pipe在頁面中引用有效,而在頁面中引用的component中的模板則無效,這也是令我困惑的地方...
尋求了一些解決方案,大多是要注意得在根模塊中聲明,于是我做了個(gè)嘗試,將組件也寫成一個(gè)功能模塊,并在組件功能模塊中申明pipe,結(jié)果很欣喜,組件中的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得以生效.
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
新聞名稱:Angular2的管道Pipe的使用方法
網(wǎng)頁URL:http://bm7419.com/article48/psdhhp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
移動(dòng)網(wǎng)站建設(shè)知識(shí)