Angularでカスタムパイプを作成する

投稿日: 2022-04-20 2022-10-24
タグ: Angular

Angular 2+のパイプは、テンプレートから直接データを変換およびフォーマットするための優れた方法です。箱から出して、日付、通貨、パーセンテージ、文字のケースのパイプを取得しますが、独自のカスタムパイプを簡単に定義することもできます。ここでは、たとえば、文字列を受け取り、文字の順序を逆にするパイプを作成します。アプリフォルダ内のreverse-str.pipe.tsファイルに入るコードは次のとおりです。

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

次に、カスタムパイプを宣言としてアプリモジュールに含めます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ReverseStr } from './reverse-str.pipe.ts';

そして最後に、テンプレートでは、これがこのカスタムパイプの使用方法です。

{{ user.name | reverseStr }}

パラメータ付きパイプ

パイプ内に任意の量のパラメーターを定義することもできます。これにより、パイプにパラメーターを渡すことができます。たとえば、提供された文字列の前後に文字列を追加するパイプは次のとおりです。

@Pipe({name: 'uselessPipe'})
export class uselessPipe implements PipeTransform {
  transform(value: string, before: string, after: string): string {
    let newStr = `${before} ${value} ${after}`;
    return newStr;
  }
}

そして、あなたはそれをそのように呼ぶでしょう：

{{ user.name | uselessPipe:"Mr.":"the great" }}

ES6の文字列補間を使用して、新しい文字列を非常に簡単に作成したことに注目してください。 `$ {before} $ {value} $ {after}`

getdocs

13036