Angular용 LocaleUpperCasePipe 만들기

파리 메트로 그래피티

문제

Angular는 파이프를 사용하여 데이터가 템플릿에 표시되는 방식을 변환하는 데 도움을 줍니다. DatePipe 및 UpperCasePipe 와 같은 built-in pipes 의 숫자를 제공합니다. 그러나 작업 프로젝트를 위한 현지화 기능을 작업하는 동안 동료는 UpperCasePipe가 toUpperCase() under the hood.을 사용하고 toUpperCase()가 로케일을 인식하지 못하며 특정 로케일의 경우 대문자를 올바르게 표시하지 못하고 namely Turkish . Angular에서 사용자 지정 파이프를 만드는 것이 쉽기 때문에 로케일을 인식하는 파이프를 만들기로 결정했습니다. 이 게시물에서는 LocaleUpperCasePipe에 대한 코드를 공유하고 사용 방법을 설명하며 리포지토리 및 데모에 대한 링크를 제공합니다.

"ılıman ilik"과 같은 소문자 값이 주어지면 UpperCasePipe는 ILIMAN ILIK를 반환하는데 이는 잘못된 것입니다. 올바른 결과는 ILIMAN İLİK 이어야 합니다. (어리석은 터키어에 대해 사과드립니다. 저는 스피커가 아니며 쉬운 테스트 값을 찾고 있었습니다.)

LocaleUpperCasePipe

파이프는 인수를 취할 수 있습니다. 선택적 로케일 인수를 허용하도록 설계했습니다. 인수를 받지 못하면 기본 언어의 폴백 값을 사용합니다.

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

import { Constants } from '../../utils/constants';

@Pipe({ name: 'localeuppercase' })
export class LocaleUpperCasePipe implements PipeTransform {
  transform(
    value: string | null | undefined,
    language?: string
  ): string | null {
    if (value == null) {
      return null;
    }
    if (typeof value !== 'string') {
      return '';
    }
    const locale = language || Constants.defaultLanguage;

    try {
      return value.toLocaleUpperCase(locale);
    } catch (error) {
      console.warn(error);
      return value.toLocaleUpperCase(Constants.defaultLanguage);
    }
  }
}

대체 값보다 전달된 로케일 인수를 선호하도록 파이프를 설계했습니다. 로케일 인수가 유효하지 않은 값이면 파이프는 오류를 포착하여 콘솔에 경고로 출력하고 기본 로케일 값을 사용하도록 폴백합니다. 기본 언어 값이 있으므로 기본 언어가 터키어와 같은 경우 이를 설정할 수 있으며 인수를 전달할 필요 없이 파이프를 사용할 수 있습니다(다른 언어의 단어를 대문자로 표시하지 않는 한).

상수 파일은 다음과 같습니다.

export interface IConstant {
  defaultLanguage: string;
}

export const Constants: IConstant = {
  defaultLanguage: 'en-US',
};

파이프 사용

다음은 인수 없이 파이프를 사용하는 예입니다.

{{ testValue | localeuppercase }}

다음은 로케일 인수가 있는 파이프입니다.

{{ testValue | localeuppercase: "tr-TR" }}

자원

저장소에는 원하는 동작을 입력하는 데 도움이 되는 unit tests for the pipe이 포함되어 있으며 사용 중인 파이프의 표시multiple examples가 있습니다.

Here은 GitHub의 리포지토리이고 here은 StackBlitz에 있는 코드의 작업 데모입니다. Angular의 모든 게시물에 태그가 지정되고 수집됩니다here .

게시물 Making a LocaleUpperCasePipe for Angular이 Hapax Legomenon에 처음 나타났습니다.