Angular2-custom-pipes
提供:Dev Guides
Angular 2-カスタムパイプ
Angular 2には、カスタムパイプを作成する機能もあります。 カスタムパイプを定義する一般的な方法は次のとおりです。
どこで、
- 'パイプ名' -これはパイプの名前です。
- Pipeclass -これは、カスタムパイプに割り当てられたクラスの名前です。
- 変換-これはパイプで動作する関数です。
- パラメータ-これは、パイプに渡されるパラメータです。
- Returntype -これはパイプの戻り値の型です。
2つの数値を乗算するカスタムパイプを作成しましょう。 次に、コンポーネントクラスでそのパイプを使用します。
- ステップ1 *-最初に、multiplier.pipe.tsというファイルを作成します。
- ステップ2 *-上記で作成したファイルに次のコードを配置します。
上記のコードについて、次の点に注意する必要があります。
- 最初にPipeおよびPipeTransformモジュールをインポートします。
- 次に、「Multiplier」という名前のパイプを作成します。
- PipeTransformモジュールを実装するMultiplierPipeというクラスを作成します。
- 変換関数は、値と複数のパラメーターを受け取り、両方の数値の乗算を出力します。
- ステップ3 *-app.component.tsファイルに、次のコードを配置します。
注-テンプレートでは、新しいカスタムパイプを使用します。
- ステップ4 *-次のコードがapp.module.tsファイルに配置されていることを確認します。
上記のコードについては、次のことに注意する必要があります。
- MultiplierPipeモジュールを含める必要があります。
- また、宣言セクションに含まれるようにする必要があります。
すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。