Angular - 管道

上一頁
下一頁

管道被稱為過濾器。它有助於轉換資料並在插值中管理資料，用 {{ | }} 表示。它接受資料、陣列、整數和字串作為輸入，這些輸入由 '|' 符號分隔。本章詳細解釋了管道。

新增引數

在你的 test.component.ts 檔案中建立一個日期方法。

export class TestComponent { 
   presentDate = new Date(); 
}

現在，在你的 test.component.html 檔案中新增以下程式碼。

<div> 
   Today's date :- {{presentDate}} 
</div>

現在，執行應用程式，它將顯示以下輸出：

Today's date :- Mon Jun 15 2020 10:25:05 GMT+0530 (IST)

這裡，

日期物件被轉換為易於閱讀的格式。

新增日期管道

讓我們在上面的 html 檔案中新增日期管道。

<div> 
   Today's date :- {{presentDate | date }}
</div>

你可以看到以下輸出：

Today's date :- Jun 15, 2020

日期引數

我們可以使用 : 字元在管道中新增引數。我們可以使用此引數顯示簡短、完整或格式化的日期。在 test.component.html 檔案中新增以下程式碼。

<div> 
   short date :- {{presentDate | date:'shortDate' }} <br/>
   Full date :- {{presentDate | date:'fullDate' }} <br/> 
   Formatted date:- {{presentDate | date:'M/dd/yyyy'}} <br/> 
   Hours and minutes:- {{presentDate | date:'h:mm'}} 
</div>

你可以在螢幕上看到以下響應：

short date :- 6/15/20 
Full date :- Monday, June 15, 2020 
Formatted date:- 6/15/2020 
Hours and minutes:- 12:00

鏈式管道

我們可以將多個管道組合在一起。當一個場景與必須應用於資料轉換的多個管道相關聯時，這將非常有用。

在上面的示例中，如果你想以大寫字母顯示日期，那麼我們可以同時應用 Date 和 Uppercase 管道。

<div> 
   Date with uppercase :- {{presentDate | date:'fullDate' | uppercase}} <br/>
   Date with lowercase :- {{presentDate | date:'medium' | lowercase}} <br/>  
</div>

你可以在螢幕上看到以下響應：

Date with uppercase :- MONDAY, JUNE 15, 2020 Date with lowercase :- jun 15, 2020, 12:00:00 am

這裡，

Date、Uppercase 和 Lowercase 是預定義的管道。讓我們在下節中瞭解其他型別的內建管道。

內建管道

Angular 支援以下內建管道。我們將逐一簡要討論。

AsyncPipe

如果資料以可觀察物件的形式出現，則 Async 管道將訂閱可觀察物件並返回傳輸的值。

import { Observable, Observer } from 'rxjs';
export class TestComponent implements OnInit {
   timeChange = new Observable<string>((observer: Observer>string>) => {
      setInterval(() => observer.next(new 
      Date().toString()), 1000); 
   }); 
}

這裡，

Async 管道每秒執行一次訂閱時間變化，並在每次傳遞給它的結果時返回結果。主要優點是，我們不需要在 timeChange 上呼叫 subscribe，也不需要擔心取消訂閱，如果元件被移除。

在你的 test.component.html 中新增以下程式碼。

<div> 
   Seconds changing in Time: {{ timeChange | async }}
</div>

現在，執行應用程式，你可以在螢幕上看到秒數在變化。

CurrencyPipe

它用於將給定的數字轉換為各個國家的貨幣格式。考慮在 test.component.ts 檔案中使用以下程式碼：

import { Component, OnInit } from '@angular/core'; @Component({ 
   selector: 'app-test', 
   template: ` 
   <div style="text-align:center"> 
      <h3> Currency Pipe</h3> 
      <p>{{ price | currency:'EUR':true}}</p> 
      <p>{{ price | currency:'INR' }}</p> 
   </div> 
   `, 
   styleUrls: ['./test.component.scss'] 
}) 
export class TestComponent implements OnInit { 
   price : number = 20000; ngOnInit() {

   } 
}

你可以在螢幕上看到以下輸出：

Currency Pipe

€20,000.00 
₹20,000.00

SlicePipe

Slice 管道用於返回陣列的切片。它以索引作為引數。如果你只指定起始索引，這意味著它將列印到值的末尾。如果你想列印特定範圍的值，那麼我們可以指定起始和結束索引。

我們還可以使用負索引訪問元素。下面顯示了一個簡單的示例：

test.component.ts

import { Component, OnInit } from '@angular/core'; @Component({ 
   selector: 'app-test', 
   template: ` 
   <div> 
      <h3>Start index:- {{Fruits | slice:2}}</h3> 
      <h4>Start and end index:- {{Fruits | slice:1:4}}</h4> 
      <h5>Negative index:- {{Fruits | slice:-2}}</h5> 
      <h6>Negative start and end index:- {{Fruits | slice:-4:-2}}</h6> 
   </div>
   `, 
   styleUrls: ['./test.component.scss'] 
}) 
export class TestComponent implements OnInit { 
   Fruits = ["Apple","Orange","Grapes","Mango","Kiwi","Pomegranate"]; 
   ngOnInit() {

   } 
}

現在執行你的應用程式，你可以在螢幕上看到以下輸出：

Start index:- Grapes,Mango,Kiwi,Pomegranate
Start and end index:- Orange,Grapes,Mango 
Negative index:- Kiwi,Pomegranate 
Negative start and end index:- Grapes,Mango

這裡，

  • {{Fruits | slice:2}} 表示它從第二個索引值 Grapes 開始到值的末尾。

  • {{Fruits | slice:1:4}} 表示從 1 到 end-1，所以結果是從第一個到第三個索引值。

  • {{Fruits | slice:-2}} 表示從 -2 開始到末尾，因為沒有指定結束值。因此，結果是 Kiwi、Pomegranate。

  • {{Fruits | slice:-4:-2}} 表示從負索引 -4 即 Grapes 開始到 end-1 即 -3，所以索引 [-4,-3] 的結果是 Grapes、Mango。

DecimalPipe

它用於格式化十進位制值。它也被認為是 CommonModule。讓我們在 test.component.ts 檔案中理解一個簡單的程式碼：

import { Component, OnInit } from '@angular/core'; @Component({ 
   selector: 'app-test', 
   template: ` 
   <div style="text-align:center"> 
      <h3>Decimal Pipe</h3> 
      <p> {{decimalNum1 | number}} </p> 
      <p> {{decimalNum2 | number}} </p> 
   </div> 
   `, 
   styleUrls: ['./test.component.scss'] 
}) 
export class TestComponent implements OnInit { 
   decimalNum1: number = 8.7589623; 
   decimalNum2: number = 5.43; 
   ngOnInit() {

   } 
}

你可以在螢幕上看到以下輸出：

Decimal Pipe 
8.759 
5.43

格式化值

我們可以在數字模式內應用字串格式。它基於以下格式：

number:"{minimumIntegerDigits}.{minimumFractionDigits} - {maximumFractionDigits}"

讓我們在我們的程式碼中應用上述格式：

@Component({ 
   template: ` 
   <div style="text-align:center"> 
      <p> Apply formatting:- {{decimalNum1 | number:'3.1'}} </p> 
      <p> Apply formatting:- {{decimalNum1 | number:'2.1-4'}} </p> 
   </div> 
   `, 
})

這裡，

{{decimalNum1 | number:’3.1’}} 表示三位小數，至少一位小數，但對最大小數位數沒有限制。它返回以下輸出：

Apply formatting:- 008.759

{{decimalNum1 | number:’2.1-4’}} 表示兩位小數，至少一位，最多四位小數，所以它返回以下輸出：

Apply formatting:- 08.759

PercentPipe

它用於將數字格式化為百分比。格式化字串與 DecimalPipe 概念相同。下面顯示了一個簡單的示例：

import { Component, OnInit } from '@angular/core'; 
@Component({ 
   selector: 'app-test', 
   template: ` 
   <div style="text-align:center"> 
      <h3>Decimal Pipe</h3> 
      <p> {{decimalNum1 | percent:'2.2'}} </p> 
   </div> 
   `, 
   styleUrls: ['./test.component.scss'] 
}) 
export class TestComponent { 
   decimalNum1: number = 0.8178; 
}

你可以在螢幕上看到以下輸出：

Decimal Pipe 
81.78%

JsonPipe

它用於將 JavaScript 物件轉換為 JSON 字串。在 test.component.ts 檔案中新增以下程式碼：

import { Component, OnInit } from '@angular/core'; 
@Component({ 
   selector: 'app-test', 
   template: ` 
   <div style="text-align:center"> 
      <p ngNonBindable>{{ jsonData }}</p> (1) 
      <p>{{ jsonData }}</p> 
      <p ngNonBindable>{{ jsonData | json }}</p> 
      <p>{{ jsonData | json }}</p> 
   </div> 
   `, 
   styleUrls: ['./test.component.scss'] 
}) 
export class TestComponent { 
   jsonData = { id: 'one', name: { username: 'user1' }} 
}

現在，執行應用程式，你可以在螢幕上看到以下輸出：

{{ jsonData }} 
(1) 
[object Object] 
{{ jsonData | json }} 
{ "id": "one", "name": { "username": "user1" } }

建立自定義管道

正如我們已經看到的，Angular 中有很多預定義的管道，但有時我們可能希望以自定義格式轉換值。本節解釋了建立自定義管道。

使用以下命令建立一個自定義管道：

ng g pipe digitcount

執行上述命令後，你將看到以下響應：

CREATE src/app/digitcount.pipe.spec.ts (203 bytes) CREATE src/app/digitcount.pipe.ts (213 bytes) 
UPDATE src/app/app.module.ts (744 bytes)

讓我們建立一個使用管道計算數字中位數的邏輯。開啟 digitcount.pipe.ts 檔案並新增以下程式碼：

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ 
   name: 'digitcount' 
}) 
export class DigitcountPipe implements PipeTransform { 
   transform(val : number) : number { 
      return val.toString().length; 
   } 
}

現在，我們已經添加了計算數字中位數的邏輯。讓我們在 test.component.ts 檔案中新增最終程式碼：

import { Component, OnInit } from '@angular/core'; @Component({ 
   selector: 'app-test', 
   template: ` 
   <div> 
      <p> DigitCount Pipe </p> 
      <h1>{{ digits | digitcount }}</h1> 
   </div> 
   `, 
   styleUrls: ['./test.component.scss'] 
}) 
export class TestComponent implements OnInit { 
   digits : number = 100; 
   ngOnInit() { 
   } 
}

現在，執行應用程式，你將看到以下響應：

DigitCount Pipe 
3

工作示例

讓我們在我們的 ExpenseManager 應用程式中使用該管道。

開啟命令提示符並轉到專案根資料夾。

cd /go/to/expense-manager

啟動應用程式。

ng serve

開啟 ExpenseEntryListComponent 的模板，src/app/expense-entry-list/expense-entry-list.component.html，並在 entry.spendOn 中包含管道，如下所示：

<td>{{ entry.spendOn | date: 'short' }}</td>

在這裡，我們使用了日期管道以簡短格式顯示支出日期。

最後，應用程式的輸出如下所示：

Pipes
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.