Angular 2 - 自定義管道

Angular 2 還具有建立自定義管道的功能。定義自定義管道的一般方法如下。

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
} 

其中，

• 'Pipename' − 這是管道的名稱。

• Pipeclass − 這是分配給自定義管道的類的名稱。

• Transform − 這是用於處理管道的函式。

• Parameters − 這些是傳遞給管道的引數。

• Returntype − 這是管道的返回型別。

讓我們建立一個自定義管道來乘以兩個數字。然後，我們將在元件類中使用該管道。

步驟 1 − 首先，建立一個名為 multiplier.pipe.ts 的檔案。

步驟 2 − 將以下程式碼放在上面建立的檔案中。

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

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
} 

關於以上程式碼，需要注意以下幾點：

• 我們首先匯入 Pipe 和 PipeTransform 模組。

• 然後，我們建立一個名為“Multiplier”的管道。

• 建立一個名為 MultiplierPipe 的類，該類實現 PipeTransform 模組。

• 然後，transform 函式將接收值和多個引數，並輸出這兩個數字的乘積。

步驟 3 − 在 app.component.ts 檔案中，放置以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  } 

注意 − 在我們的模板中，我們使用了新的自定義管道。

步驟 4 − 確保在 app.module.ts 檔案中放置以下程式碼。

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

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

關於以上程式碼，需要注意以下幾點：

• 我們需要確保包含我們的 MultiplierPipe 模組。

• 我們還需要確保它包含在 declarations 部分。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。