커스텀 파이프를 추가하는 Angular 10

Angular의 강력한 측면 중 하나는 사용자 지정 파이프를 추가하는 기능입니다.
파이프는 데이터(주로 문자열)를 특정 날짜 형식, 통화 등으로 변환하는 데 사용됩니다.

파이프 기호를 사용하여 템플릿에서 사용할 수 있는 간단한 기능입니다.

{{ myString | customPipe }}

Angular 자체에는 여러 내장 파이프가 함께 제공됩니다.

날짜 파이프

대문자파이프

LowerCasePipe

커런시파이프

Angular documentation에서 전체 목록을 찾아보세요.

오늘 우리는 최대 문자에 대한 텍스트와 입력을 받아들이는 파이프를 만들 것입니다.
그런 다음 최대값에 문자열 + 줄임표를 반환합니다.

파이프 만들기

Angular 생성기를 사용하여 파이프를 만들 수 있습니다.

터미널을 열고 폴더로 이동하여 다음 명령을 실행합니다.

ng generate pipe maxLength

이렇게 하면 파이프가 생성되고 app.module.ts에도 추가됩니다.

@NgModule({
  declarations: [
    // All declarations
    MaxLengthPipe
  ],
  imports: [
        // All imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})

이제 max-length.pipe.ts를 열어보겠습니다. 파이프에 export 기능이 있는 것을 볼 수 있습니다. 호출되는 기본 함수입니다.

인수와 반환 유형을 만들어 봅시다.

transform(value: string, length: number): string {
    return value;
}

값을 문자열로, 길이를 숫자로, 출력을 문자열로 설정합니다.

이제 값이 길이보다 긴지 확인하고 제한해야 합니다.

if(length < value.length) {
  return value.substring(0, length) + '...';
} 
return value;

여기서 길이가 value.lenght보다 큰지 확인합니다.
그렇다면 하위 문자열을 반환합니다.

그렇지 않으면 값을 있는 그대로 반환합니다.

우리의 파이프를 행동으로 옮기기

second.component.ts를 열고 새 사용자 지정 파이프를 사용하기 위해 HTML에서 렌더링할 텍스트를 선언합니다.

export class SecondComponent implements OnInit {

  short: string = 'This is not so long.';
  long: string = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis sollicitudin turpis, ac lobortis libero.';

  constructor() { }

  ngOnInit(): void {
  }

}

이제 우리는 second.component.html를 열고 그렇게 보이게 만들 수 있습니다.

<p>second works!</p>

<p>{{ short | maxLength:50 }}
<p>{{ long | maxLength:50 }}
<p>{{ long | maxLength:10 }}

이제 앱을 실행하고 이것이 어떻게 보이는지 봅시다.



이제 동적 인수를 허용하는 사용자 지정 파이프를 만들었습니다.

GitHub에서 이 코드 프로젝트를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나