カスタムパイプの作成

Angularでデータ変換のニーズに合わせてカスタムパイプを作成できます。

このアクティビティでは、カスタムパイプを作成してテンプレートで使用します。

パイプは @Pipe デコレーターを付けたTypeScriptクラスです。例を挙げます。

import {Pipe, PipeTransform} from '@angular/core';@Pipe({  name: 'star',})export class StarPipe implements PipeTransform {  transform(value: string): string {    return `⭐️ ${value} ⭐️`;  }}

StarPipe は文字列値を受け取り、その文字列を星で囲んだものを返します。以下の点に注意してください。

• @Pipe デコレーターの構成の name は、テンプレートで使用される名前です。
• transform 関数は、ロジックを記述する場所です。

では、実際に試してみましょう。ReversePipe を作成します。

1. ReversePipe の作成

   reverse.pipe.ts で ReversePipe クラスに @Pipe デコレーターを追加し、次の構成を指定します。

   @Pipe({  name: 'reverse'})

2. transform 関数の実装

   これで、ReversePipe クラスはパイプになります。transform 関数を更新して、反転ロジックを追加します。

   export class ReversePipe implements PipeTransform {  transform(value: string): string {    let reverse = '';    for (let i = value.length - 1; i >= 0; i--) {      reverse += value[i];    }    return reverse;  }}

3. テンプレートで ReversePipe を使用する

パイプロジックを実装したら、最後のステップとしてテンプレートで使用します。app.ts でテンプレートにパイプを含め、コンポーネントのインポートに追加します。

@Component({  ...  template: `Reverse Machine: {{ word | reverse }}`  imports: [ReversePipe]})

これにて終了です。このアクティビティの完了、おめでとうございます。これでパイプの使い方と、独自のパイプを実装する方法がわかりました。