Angular 4 - 管道 (Pipes)

---

---

本章我們將討論 Angular 4 中的管道 (Pipes)。在 Angular 1 中，管道被稱為過濾器，在 Angular 2 和 4 中則被稱為管道。

字元 “|” 用於轉換資料。以下是相同的語法

{{ Welcome to Angular 4 | lowercase}}

它接收整數、字串、陣列和日期作為輸入，用|分隔，以便按照要求轉換為指定的格式，並在瀏覽器中顯示。

讓我們考慮一些使用管道的示例。

這裡，我們想將給定的文字顯示為大寫。這可以使用管道如下完成：

在app.component.ts檔案中，我們定義了標題變數：

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
}

以下程式碼行將進入app.component.html檔案。

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

瀏覽器顯示如下截圖：

Angular 4 提供了一些內建管道。管道列在下面：

• 小寫管道 (Lowercasepipe)
• 大寫管道 (Uppercasepipe)
• 日期管道 (Datepipe)
• 貨幣管道 (Currencypipe)
• JSON 管道 (Jsonpipe)
• 百分比管道 (Percentpipe)
• 小數管道 (Decimalpipe)
• 切片管道 (Slicepipe)

我們已經看到了小寫和大寫管道。現在讓我們看看其他管道是如何工作的。

以下程式碼行將幫助我們在app.component.ts檔案中定義所需的變數：

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
             "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

我們將在app.component.html檔案中使用這些管道。

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

以下截圖顯示每個管道的輸出：

如何建立一個自定義管道？

要建立自定義管道，我們建立了一個新的ts檔案。這裡，我們想要建立sqrt自定義管道。我們為檔案賦予了相同的名稱，它如下所示：

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

要建立自定義管道，我們必須從 Angular/core 中匯入 Pipe 和 PipeTransform。在@Pipe 指令中，我們必須為我們的管道命名，這將在我們的 .html 檔案中使用。由於我們正在建立 sqrt 管道，我們將將其命名為 sqrt。

接下來，我們必須建立類，類名為SqrtPipe。此類將實現PipeTransform。

在類中定義的 transform 方法將引數作為數字，並在開平方後返回該數字。

由於我們建立了一個新檔案，我們需要在app.module.ts中新增它。操作如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],

   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

我們建立了app.sqrt.ts類。我們必須在app.module.ts中匯入它並指定檔案的路徑。它也必須包含在宣告中，如上所示。

現在讓我們看看在app.component.html檔案中對 sqrt 管道的呼叫。

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

輸出如下所示：