Angular 2-カスタムパイプ

Angular 2には、カスタムパイプを作成する機能もあります。カスタムパイプを定義する一般的な方法は次のとおりです。

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

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

どこで、

'パイプ名' -これはパイプの名前です。
Pipeclass -これは、カスタムパイプに割り当てられたクラスの名前です。
変換-これはパイプで動作する関数です。
パラメータ-これは、パイプに渡されるパラメータです。
Returntype -これはパイプの戻り値の型です。

2つの数値を乗算するカスタムパイプを作成しましょう。次に、コンポーネントクラスでそのパイプを使用します。

ステップ1 *-最初に、multiplier.pipe.tsというファイルを作成します。

Multiplier

ステップ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」という名前のパイプを作成します。
PipeTransformモジュールを実装するMultiplierPipeというクラスを作成します。
変換関数は、値と複数のパラメーターを受け取り、両方の数値の乗算を出力します。

ステップ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モジュールを含める必要があります。
また、宣言セクションに含まれるようにする必要があります。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

乗算器出力

Angular2-custom-pipes

Angular 2-カスタムパイプ