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의 문자열 보간법을 사용하여 어떻게 새 문자열을 쉽게 구성했는지 확인하십시오: "&#36 {before} &#36 {value} &#36 {after}"