Angular2的管道Pipe的使用方法

更新時間：2017年11月07日 09:59:52 作者：angular

本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細的介紹了管道的定義和使用方法，具有一定的參考價值，有興趣的可以了解一下

管道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來裝飾類
實現(xiàn)PipeTransform的transform方法，該方法接受一個輸入值和一些可選參數(shù)
在@Pipe裝飾器中指定管道的名字，這個名字就可以在模板中使用。

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

2. 管道使用

user.template.html實現(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實現(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和定義一個添加user的方法，在user.template.html中使用自定義管道filterUser。

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

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

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

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

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

在我們的示例中將管道變更為非純管道是非常賤簡單的，只要在管道元數(shù)據(jù)中將添加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);
  }
}

這樣每當我們添加新用戶時，數(shù)據(jù)就會馬上響應在頁面上了。

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

尋求了一些解決方案，大多是要注意得在根模塊中聲明，于是我做了個嘗試，將組件也寫成一個功能模塊，并在組件功能模塊中申明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得以生效.

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: