管道快速入門

查看新版Angular Pipe 快速入門

Angular 中 Pipe(管道) 與 Angular 1.x 中的 filter(過(guò)濾器) 的作用的是一樣的。它們都是用來(lái)對(duì)輸入的數(shù)據(jù)進(jìn)行處理，如大小寫(xiě)轉(zhuǎn)換、數(shù)值和日期格式化等。

內(nèi)建管道及分類

• String -> String
  • UpperCasePipe
  • LowerCasePipe
  • TitleCasePipe
• Number -> String
  • DecimalPipe
  • PercentPipe
  • CurrencyPipe
• Object -> String
  • JsonPipe
  • DatePipe
• Tools
  • SlicePipe
  • AsyncPipe
  • I18nPluralPipe
  • I18nSelectPipe

內(nèi)建管道使用示例

大寫(xiě)轉(zhuǎn)換

<div>
  <p ngNonBindable>{{ 'Angular' | uppercase }}</p>
  <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

小寫(xiě)轉(zhuǎn)換

<div>
  <p ngNonBindable>{{ 'Angular' | lowercase }}</p>
  <p>{{ 'Angular' | lowercase }}</p> <!-- Output: angular -->
</div>

數(shù)值格式化

<div>
  <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p>
  <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>

日期格式化

<div>
  <p ngNonBindable>{{ today | date: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以當(dāng)前時(shí)間為準(zhǔn)，輸出格式：10:40 AM -->
</div>

JavaScript 對(duì)象序列化

<div>
  <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
  <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

管道參數(shù)

管道可以接收任意數(shù)量的參數(shù)，使用方式是在管道名稱后面添加 : 和參數(shù)值。如 number: '1.4-4' ，若需要傳遞多個(gè)參數(shù)則參數(shù)之間用冒號(hào)隔開(kāi)，具體示例如下：

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
  <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->
</div>

管道鏈

我們可以將多個(gè)管道連接在一起，組成管道鏈對(duì)數(shù)據(jù)進(jìn)行處理。

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
  <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->
</div>

完整示例

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  template: `
    <div>
      <p ngNonBindable>{{ 'Angular' | uppercase }}</p>
      <p>{{ 'Angular' | uppercase }}</p>
    </div>
    <div>
      <p ngNonBindable>{{ 'Angular' | lowercase }}</p>
      <p>{{ 'Angular' | lowercase }}</p>
    </div>
    <div>
      <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p>
      <p>{{ 3.14159265 | number: '1.4-4' }}</p>
    </div>
    <div>
      <p ngNonBindable>{{ today | date: 'shortTime' }}</p>
      <p>{{ today | date: 'shortTime' }}</p>
    </div>
    <div>
      <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
      <p>{{ { name: 'semlinker' } | json }}</p>
    </div>
    <div>
      <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
      <p>{{ 'semlinker' | slice:0:3 }}</p>
    </div>
    <div>
      <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
      <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
    </div>
  `,
})
export class AppComponent {
  today = new Date();
}

自定義管道

自定義管道的步驟：

• 使用 @Pipe 裝飾器定義 Pipe 的 metadata 信息，如 Pipe 的名稱 - 即 name 屬性
• 實(shí)現(xiàn) PipeTransform 接口中定義的 transform 方法

WelcomePipe 定義

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({ name: 'welcome' })
export class WelcomePipe implements PipeTransform {
  transform(value: string): string {
    if(!value) return value;
    if(typeof value !== 'string') {
      throw new Error('Invalid pipe argument for WelcomePipe');
    }
    return "Welcome to " + value;
  }
} 

WelcomePipe 使用

<div>
   <p ngNonBindable>{{ 'semlinker' | welcome }}</p>
   <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>

當(dāng) WelcomePipe 的輸入?yún)?shù)，即 value 值為非字符串時(shí)，如使用 123，則控制臺(tái)將會(huì)拋出以下異常：

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:23:9 caused by: Invalid pipe argument for WelcomePipe

RepeatPipe 定義

import {Pipe, PipeTransform} from '@angular/core';


@Pipe({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
    transform(value: any, times: number) {
        return value.repeat(times);
    }
}

RepeatPipe 使用

<div>
   <p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
   <p>{{ 'lo' | repeat:3 }}</p> <!-- Output: lololo -->
</div>

管道分類

• pure 管道：僅當(dāng)管道輸入值變化的時(shí)候，才執(zhí)行轉(zhuǎn)換操作，默認(rèn)的類型是 pure 類型。(備注：輸入值變化是指原始數(shù)據(jù)類型如：string、number、boolean 等的數(shù)值或?qū)ο蟮囊弥蛋l(fā)生變化)
• impure 管道：在每次變化檢測(cè)期間都會(huì)執(zhí)行，如鼠標(biāo)點(diǎn)擊或移動(dòng)都會(huì)執(zhí)行 impure 管道

總結(jié)

本文介紹了 Angular 中的常用內(nèi)建管道的用法和管道的分類，同時(shí)也介紹了 pure 和 impure 管道的區(qū)別。 此外我們通過(guò)兩個(gè)示例展示了如何自定義管道，最后詳細(xì)分析了 RepeatPipe 管道的工作原理。建議讀者更改 RepeatePipe 的 pure 屬性為 false，體驗(yàn)一下 impure 管道。