09 파이프(Pipe) 02

연쇄 파이프

잠재적으로 유용한 조합으로 파이프를 함께 연결할 수 있습니다. 다음 예제에서는 생일을 대문자로 표시하기 위해 생일은 DatePipe에 연결되고 UpperCasePipe에 연결됩니다. 생년월일은 APR 15, 1988로 표시됩니다.

src/app/app.component.html

The chained hero's birthday is {{ birthday | date | uppercase}}

FRIDAY, APRIL 15, 1988로 표시하는 다음 예제는 위와 동일한 파이프를 연결하지만 날짜에 매개 변수를 전달합니다.

src/app/app.component.html

The chained hero's birthday is {{  birthday | date:'fullDate' | uppercase}}

 

사용자 지정 파이프

자체 파이프를 직접 작성할 수 있습니다. 다음은 영웅의 능력을 향상시킬 수있는 ExponentialStrengthPipe라는 사용자 지정 파이프입니다.

src/app/exponential-strength.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; /*  * Raise the value exponentially  * Takes an exponent argument that defaults to 1.  * Usage:  *   value | exponentialStrength:exponent  * Example:  *   {{ 2 | exponentialStrength:10 }}  *   formats to: 1024 */ @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform {   transform(value: number, exponent: string): number {     let exp = parseFloat(exponent);     return Math.pow(value, isNaN(exp) ? 1 : exp);   } }

파이프를 정의정의하기 위한 주요 사항은 다음과 같습니다.

l  파이프는 파이프 메타 데이터로 장식 된 클래스입니다.

l  파이프 클래스는 PipeTransform 인터페이스의 transform 메소드를 구현합니다. 이 메소드는 입력 값과 선택적 매개 변수를 받아들이고 변환 된 값을 리턴합니다.

l  파이프에 전달 된 각 매개 변수에 대한 변환 메소드에 대한 추가 인수가 있습니다. 파이프에는 지수와 같은 하나의 매개 변수가 있습니다.

l  파이프라는 것을 Angular에게 알려주려면 @Pipe 데코레이터를 적용합니다. 이 데코레이터는 Core Angular 라이브러리에서 가져옵니다.

l  @Pipe 데코레이터를 사용하면 템플릿 표현식에서 사용할 파이프 이름을 정의 할 수 있습니다. 이름은 유효한 자바 스크립트 식별자 이어야합니다. 파이프의 이름은 exponentialStrength입니다.

PipeTransform 인터페이스 Transform 메소드는 파이프에 필수적입니다. PipeTransform 인터페이스는 이 메소드를 정의하고 툴링과 컴파일러에게 안내합니다. 기술적으로 선택 사항입니다. Angular는 transform메소드와 상관없이 찾아서 실행합니다.

이제 파이프를 시연하기 위한 컴포넌트가 필요합니다.

src/app/power-booster.component.ts

import { Component } from '@angular/core';   @Component({   selector: 'power-booster',   template: `     <h2>Power Booster</h2>     <p>Super power boost: {{2 | exponentialStrength: 10}}</p>   ` }) export class PowerBoosterComponent { }

다음 사항에 유의하십시오.

l  내장 파이프를 사용하는 것과 같은 방식으로 사용자 지정 파이프를 사용합니다.

l  AppModule의 declarations 배열에 파이프를 포함해야 합니다.

사용자 지정 파이프는 수동으로 등록해야합니다. 그렇지 않으면 Angular가 오류를 보고합니다. 이전 예제에서는 모든 Angular 내장 파이프가 사전 등록되었으므로 DatePipe를 나열하지 않았습니다.

라이브 예제 / 예제 다운로드에서 동작을 검사하려면 템플릿의 값과 선택적인 지수를 변경하십시오.