Angularのコンポーネントクラスでカスタムパイプを使用する
テンプレートで使用して補間値を変更するカスタムパイプを簡単に作成できます。 コンポーネントクラスでパイプの機能も使用する場合は、コードを複製する必要はありません。 実際に行う必要があるのは、サービスのようにパイプを挿入してから、その変換メソッドを呼び出すことだけです。
以下は、Angular2+アプリで機能します。
2文字より長いすべての単語を大文字にするカスタムCapitalizePipeがあるとします。
Capitalize.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
これで、パイプがモジュールの宣言に適切に追加されたので、次のようにコンポーネントのクラスにパイプを挿入できます。
app.component.ts
// ...
import { CapitalizePipe } from './capitalize.pipe';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ CapitalizePipe ]
})
export class AppComponent {
constructor(private capitalize: CapitalizePipe) {}
そしてそれを使用するには、注入されたインスタンスでtransfomを呼び出すだけです。
onSubmit(value) {
this.data = this.capitalize.transform(value);
// ...
}
👍そのように簡単です! これで、コードを複製せずにコンポーネントクラスで直接再利用できるカスタムパイプでロジックを定義できます。