Angular Pipes로 데이터 변환

Angular 파이프를 사용하여 데이터를 한 값에서 다른 값으로 변환할 수 있습니다. 이 기술은 WPF 변환기와 유사합니다.

WPF에서 데이터를 한 값에서 다른 값으로 변환하려면 IValueConverter를 사용합니다. Angular 애플리케이션에서 데이터를 변환하려면 Pipe를 사용합니다. Pipe는 WPF 변환기와 매우 유사합니다. 데이터를 입력으로 받은 다음 해당 데이터를 원하는 출력으로 변환하여 표시합니다.

Angular 가장 일반적인 데이터 변환을 위해 여러 개의 미리 정의된 파이프를 제공합니다. 예를 들어, 헤더 텍스트를 대문자로 표시하려면 UpperCasePipe를 사용할 수 있습니다. 파이프를 사용하는 것은 매우 간단합니다. 표현식 뒤에 파이프 연산자 | 제공하고 그 뒤에 파이프 이름을 입력합니다.

<h2>{{ header | uppercase }}</h2>
html

WPF 변환기와 비교했을 때 Angular의 파이프가 정말 좋은 점은 실제로 한 번에 두 개 이상의 파이프를 사용할 수 있다는 것입니다. 예를 들어 DatePipe와 UpperCasePipe를 사용하여 날짜를 사용자 친화적인 형식으로 포맷하고 대문자로 만들 수 있습니다.

<h2>{{ birthday | date | uppercase }}</h2>
html

그 외에도 파이프에 매개변수를 제공하는 옵션도 있습니다. 예를 들어 DatePipe 에는 형식, 시간대, 로케일과 같은 매개변수가 있습니다.

<h2>{{ birthday | date:"MM/dd/yy" }}</h2>
html

Create Your Own Pipe

미리 정의된 파이프를 사용하는 것 외에도 Angular 자체 파이프를 정의할 수 있습니다. 문자열을 다른 문자열로 대체하는 WPF 변환기의 구현을 살펴보겠습니다.

public class ReplaceConverter : IValueConverter
{
    public string OldValue { get; set; }
    public string NewValue { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var strValue = value.ToString();
        return strValue.Replace(this.OldValue, this.NewValue);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
csharp

<Window.Resources>
    <local:ReplaceConverter OldValue=" " NewValue="-" x:Key="replaceConverter"></local:ReplaceConverter>
</Window.Resources>
<Grid>
    <TextBlock Text="{Binding Path=Name, Mode=OneWay, Converter={StaticResource replaceConverter}}"></TextBlock>
</Grid>
xml

Angular에서 같은 작업을 수행하려면 PipeTransform 인터페이스를 구현하고 @Pipe 데코레이터가 있는 클래스를 정의해야 합니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'replace'
})
export class ReplacePipe implements PipeTransform {

    transform(value: string, oldValue: string, newValue: string): string {
        return value.replace(oldValue, newValue);
    }
}
typescript

<span>{{ name | replace:" ":"-" }}</span>
html

구성요소의 html 템플릿에서 파이프를 사용하려면 모듈 선언에 파이프를 추가해야 합니다.

Angular 파이프와 WPF 변환기의 중요한 차이점은 Angular 파이프는 단방향 바인딩에만 작동하는 반면, WPF 변환기에는 ConvertBack 메서드가 있다는 것입니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular Pipes로 데이터 변환

Create Your Own Pipe

Additional Resources

테마