각진 파이프

안녕 독자들! 내 학습 여정의 일부로 당신을 만나서 기쁩니다! 오늘은 네 번째 주이며 우리는 Angular에서 파이프를 배우고 있습니다. 이 기사는 "Angular 시작하기"시리즈의 일부입니다. 저와 같은 초보자라면 이 시리즈로 조금이나마 도움이 되었으면 합니다.

파이프는 일반적인 용어입니다. 무슨 뜻인가요? 어떻게 작동합니까? 바로 답을 얻을 것입니다!

파이프란 무엇입니까?

각도 파이프는 입력을 받아 원하는 출력으로 변환하는 함수입니다. 파이프를 사용하여 표시할 문자열, 날짜 및 기타 데이터를 변환합니다. 파이프의 주요 장점 중 하나는 한 번만 선언하면 응용 프로그램 전체에서 사용할 수 있다는 것입니다.

다음에서 사용할 수 있습니다.

원하는 형식으로 날짜를 표시합니다.

데이터를 소문자 또는 대문자 등으로 표시

빌트인 파이프

Angular는 다음과 같은 다양한 변환을 위한 많은 내장 파이프를 제공합니다.

UpperCasePipe - 텍스트를 모두 대문자로 변환합니다.

LowerCasePipe - 텍스트를 모두 소문자로 변환합니다.

CurrencyPipe - 숫자를 로케일 규칙에 따라 형식이 지정된 통화 문자열로 변환합니다.

PercentPipe - 숫자를 로케일 규칙에 따라 형식이 지정된 백분율 문자열로 변환합니다.

DatePipe - 로케일 규칙에 따라 날짜 값의 형식을 지정합니다.

DecimalPipe - 숫자를 로케일 규칙에 따라 형식이 지정된 소수점이 있는 문자열로 변환합니다.

템플릿에서 파이프 사용

파이프를 적용하기 위해 아래 코드와 같이 | 문자를 사용했습니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-friend-birthday',
  template: "<p>The friend's birthday is {{ birthday | date }}</p>"
})
export class FriendBirthdayComponent {
  birthday = new Date(1999, 3, 23); // April 23, 1999 -- since month parameter is zero-based
}

구성 요소의 birthday 값은 파이프 연산자|를 통해 date 함수로 흐르고 출력은 April 23, 1999 입니다.

다른 내장 파이프를 사용하는 예:

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
template: `{{productName | uppercase}}`
})
export class AppComponent {
productName = ‘Hello World’;
}

출력은 다음과 같습니다. HELLO WORLD

맞춤형 파이프

기본 제공 파이프와 함께 제공되지 않는 변환을 캡슐화하는 사용자 지정 파이프를 만듭니다. 그런 다음 기본 제공 파이프를 사용하는 것과 같은 방식으로 템플릿 식에서 사용자 지정 파이프를 사용하여 표시할 입력 값을 출력 값으로 변환합니다.

사용자 지정 파이프를 만들려면 다음 단계를 따라야 합니다.

클래스를 만듭니다.

클래스에서 PipeTransform를 구현합니다.

변환 기능을 구현합니다.

예: 문자열에서 각 단어의 첫 글자를 대문자로 표시하는 사용자 지정 파이프 만들기.

import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({ name: ‘firstcharuppercase’ })
export class FirstCharUpperCase implements
PipeTransform {
transform(value: string, args: string[]): any {
if (!value) {
return value;
}

Pipes 61
return value.replace(/\w\S*/g, function (str) {
return str.charAt(0).toUpperCase() + str.
substr(1).toLowerCase();
});
}
}

코드에 사용자 지정 파이프 적용:

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
template: `
<ul *ngFor=’let n of names’>
<li>{{n.name | firstcharuppercase}}</li>
</ul>
`
})
export class AppComponent {
names = [];
constructor() {
this.names = this.getNames();
}
getNames() {
return 
{ ‘name’: ‘haimantika’ },
{ ‘name’: ‘alex’ },
}
}

출력은 다음과 같습니다. Haimantika

엔딩 노트

이 기사의 끝에서 파이프에 대한 명확한 개념과 이를 코드에서 사용하는 방법을 알게 될 것입니다.

질문이나 제안이 있으시면 아래 댓글에 남겨주시거나 저에게 연락해 주세요.