【Angular】인수를 복수 건네주는 Pipe의 만드는 방법과 그 호출 방법을 알고 싶다

소개

이번에는 복수의 인수를 가지는 커스텀 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}`;
    }
}

제 1 인수에는 표시하는 문자수, 제 2 인수에는 치환하는 문자를 받도록 했다.
배열 그대로도 좋지만, 인수를 명시적으로 하는 것으로 무슨 값인지를 알기 쉽기 때문에 인수를 늘릴 방침으로 했다.

실제로 파이프를 적용해보십시오.

Pipe에 복수 인수를 건네줄 때는 이렇게 콜론 연결로 지정한다.

pipe-test.component.html

<p>{{ text | omitLongSentence:20:'…'}}</p>

실제로 표시해 보면,


그건 그렇고, 대체 문자열을 변경하면,

pipe-test.component.html

<p>{{ text | omitLongSentence:20:'☆'}}</p>

변경되었습니다.

요약

커스텀 Pipe에 복수의 인수를 건네줄 때는, 제2 인수 이후를 늘려 간다.

커스텀 Pipe 이용시에 복수 인수를 건네줄 때는, 콜론 접속으로 건네준다.

참고

여러 인수를 지정하여 Angular 2 파이프를 호출하는 방법