はじめに
今回は複数の引数を持つカスタムPipeの作り方およびその呼び出し方について共有していく。
作るもの
長い文の時に指定された文字数で表示し、余った部分は指定された文字に置き換えるというカスタムPipeを作る。
（例）20文字まで表示し、余った部分は'…'に置き換える
わらわこそ夜を統べる者、イリヤ・オーンスタイン！こたびの働きを評価し、お主を我が眷属としてやろう！
↓
わらわこそ夜を統べる者、イリヤ・オーンス…
カスタムPipeの作成
$ ng g pipe shared/pipes/omit-long-sentence --skipTests=true
※specファイルの生成はどちらでも良いです。Pipe系はshared/pipes配下に作成しているので、ここはみなさんのプロジェクトでよしなに合わせてください。
出来上がったファイルがこちら↓(formatterをかけてるのでスペースが異なります。)
omit-long-sentence.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'omitLongSentence',
})
export class OmitLongSentencePipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
return null;
}
}
transform()の第一引数にpipeを適用する文字列が入ってくる。第二引数以降が実際に引数として渡される部分。
今回はこのように実装した。
omit-long-sentence.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
/**
* 長文を省略し別の文字に置き換える。
* @param lengthToDisplay 表示する文字の長さ
* @param replaceStr 置き換える文字
*【使用例】
* {{'あいうえお' | omitLongSentence 3:'…'}} => 'あいう…'
*/
@Pipe({
name: 'omitLongSentence',
})
export class OmitLongSentencePipe implements PipeTransform {
transform(value: string, lengthToDisplay: number, replaceStr = ''): string {
return `${value.slice(0, lengthToDisplay)}${replaceStr}`;
}
}
第１引数には表示する文字数、第２引数には置き換える文字を受け取るようにした。
配列のままでもいいが、引数を明示的にすることで何の値なのかがわかりやすいので引数を増やす方針にした。
実際にpipeを適用してみる
Pipeに複数引数を渡す時はこのようにコロン繋ぎで指定する。
pipe-test.component.html
<p>{{ text | omitLongSentence:20:'…'}}</p>
実際に表示してみると、
ちなみに置き換える文字列を変えてみると、
pipe-test.component.html
<p>{{ text | omitLongSentence:20:'☆'}}</p>
変更された。
まとめ
- カスタムPipeに複数の引数を渡す時は、第２引数以降を増やしていく。
- カスタムPipe利用時に複数引数を渡す時は、コロン繋ぎで渡す。