精品综合久久第一页征服,青青国产揄拍视频

查看新版Angular Pipe 快速入門

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

內建管道及分類

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

內建管道使用示例

大寫轉換

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

小寫轉換

<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: 以當前時間為準，輸出格式：10:40 AM -->
</div>

JavaScript 對象序列化

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

管道參數(shù)

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

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

管道鏈

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

<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 屬性
實現(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>

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

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 管道：僅當管道輸入值變化的時候，才執(zhí)行轉換操作，默認的類型是 pure 類型。(備注：輸入值變化是指原始數(shù)據(jù)類型如：string、number、boolean 等的數(shù)值或對象的引用值發(fā)生變化)
impure 管道：在每次變化檢測期間都會執(zhí)行，如鼠標點擊或移動都會執(zhí)行 impure 管道

總結

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

管道快速入門