カスタムパイプの作成

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

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

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

      
import {Pipe, PipeTransform} from '@angular/core';@Pipe({  standalone: true,  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({    standalone: true,    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 を使用する

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

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

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