09 파이프(Pipe) 01

파이프(Pipe)

모든 응용프로그램은 간단한 작업처럼 보이는 것으로 시작합니다: 데이터를 가져 와서 변환하고 사용자에게 보여줍니다. 데이터를 얻는 것은 로컬 변수를 만드는 것만 큼 간단하거나 WebSocket을 통해 스트리밍 데이터를 가져오는 것만큼 복잡 할 수 있습니다.

일단 데이터가 도착하면 원시데이타의 toString 값을 직접 뷰에 넣을 수는 있지만 사용자 편의성은 거의 없습니다. 예를 들어, 대부분의 경우에 사용자는 원시 문자열 형식인 Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)이 아닌 1988 년 4 월 15 일과 같은 간단한 형식으로 날짜를 보는 것을 선호합니다.

분명히 일부 값은 약간의 편집으로 이익을 얻습니다. 많은 응용프로그램 내에서 또는 여러 응용프로그램에서 동일한 변환이 반복적으로 많이 필요함을 알 수 있습니다. 거의 스타일로 생각할 수 있습니다. 실제로 HTML 템플리트에 스타일로 적용하고 싶을 수도 있습니다.

Angular 파이프 (Angular pipes)를 소개합니다. 파이프는 HTML에서 선언 할 수 있는 표시값을 변환하도록 작성하는 방법입니다.

Plunker에서 라이브 예제를 실행하고, 예제 다운로드에서 코드를 다운로드 할 수 있습니다.

 

파이프 사용

파이프는 데이터를 입력으로 가져 와서 원하는 출력으로 변환합니다. 이 페이지에서는 파이프를 사용하여 컴포넌트의 생일 프로퍼티를 사람에게 친숙한 날짜로 변환합니다.

src/app/hero-birthday1.component.ts

import { Component } from '@angular/core';   @Component({   selector: 'hero-birthday',   template: `<p>The hero's birthday is {{ birthday | date }}</p>` }) export class HeroBirthdayComponent {   birthday = new Date(1988, 3, 15); // April 15, 1988 }

컴포넌트의 템플릿을 살펴봅니다.

src/app/app.component.html

<p>The hero's birthday is {{ birthday | date }}</p>

보간 표현식에서는 파이프 연산자 (|)를 통해 컴포넌트의 생일 값을 오른쪽의 날짜 파이프 함수로 전달합니다. 모든 파이프가 이렇게 작동합니다.

날짜 및 통화 파이프에는 ECMAScript Internationalization API가 필요합니다. Safari 및 다른 구형 브라우저는 지원하지 않습니다. Polyfill을 사용하여 지원을 추가 할 수 있습니다. <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

 

내장 파이프

Angular는 DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe 및 PercentPipe와 같은 내장 파이프가 있습니다. 모든 템플릿에서 사용할 수 있습니다.

API 참조 문서의 파이프 항목에서 이러한 기타 많은 내장 파이프에 대해 자세히 알아보십시오. "pipe"라는 단어가 포함 된 항목을 필터링하십시오. Angular에는 이 페이지의 부록에 설명 된 바와 같이 FilterPipe 또는 OrderByPipe가 없습니다.

 

파이프 매개 변수화

파이프는 출력을 미세 조정할 수 있는 임의의 선택적 매개 변수를 허용합니다. 파이프에 매개 변수를 추가하려면 파이프 이름 뒤에 콜론 (:)과 매개 변수 값(예 : currency:'EUR')을 입력하십시오. 파이프가 여러 매개 변수를 허용하면 값을 콜론 (예 : slice:1:5)으로 구분합니다.

생년월일 템플릿을 수정하여 날짜 파이프에 형식 매개변수를 지정도록 합니다. 영웅의 4월 15일 생일을 포맷 한 후, 04/15/88로 표출합니다.

src/app/app.component.html

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

매개 변수 값은 문자열 리터럴 또는 컴포넌트 프로퍼티와 같은 유효한 템플릿 표현식 일 수 있습니다 (템플릿 구문 페이지의 템플릿 표현식 섹션 참조). 즉, 바인딩을 통해 생일 값을 제어하는 ​​것과 같은 방식으로 바인딩을 통해 포멧을 제어 할 수 있습니다.

파이프의 형식 매개 변수를 컴포넌트의 format 프로퍼티에 바인딩하는 두 번째 컴포넌트를 작성하십시오. 해당 컴포넌트의 템플릿은 다음과 같습니다.

src/app/hero-birthday2.component.ts (template)

template: `   <p>The hero's birthday is {{ birthday | date:format }}</p>   <button (click)="toggleFormat()">Toggle Format</button> `

또한 템플릿에 버튼을 추가하고 해당 click 이벤트를 컴포넌트의 toggleFormat() 메소드에 바인딩했습니다. 이 메서드는 짧은 형식 ('shortDate')과 긴 형식 ('fullDate') 중에서 컴포넌트의 format 프로퍼티를 토글합니다.

src/app/hero-birthday2.component.ts (class)

export class HeroBirthday2Component {   birthday = new Date(1988, 3, 15); // April 15, 1988   toggle = true; // start with true == shortDate     get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }   toggleFormat() { this.toggle = !this.toggle; } }

버튼을 클릭하면 표시된 날짜가 "04/15/1988"과 "Friday, April 15, 1988"로 바뀝니다.