국제화(I18N) 및 Transloco

이 글에서 저는 국제화와 Transloco이라는 깔끔한 라이브러리를 빌려 각도 응용 프로그램에서 국제화를 실현하는 방법을 토론할 것입니다.

국제화(I18N)는 무엇입니까?

나는 국제화가 무엇인지 설명하는 것부터 시작하는 것이 가장 좋다고 생각한다(i18n은 단어의 첫 번째 자모, 그 다음은 자모수, 단어의 마지막 자모까지), 그리고 왜 국제화가 이렇게 중요한지 설명한다.
국제화는 여러 국가에서 쉽게 사용할 수 있도록 소프트웨어 응용 프로그램을 조정하는 과정이다.흔히 볼 수 있는 오해가 있다. 즉, 이것은 응용 프로그램의 모든 텍스트가 반드시 다양한 언어의 번역을 가져야 한다는 것을 의미한다.그러나 응용 프로그램에서 완전한 i18n은 단순한 텍스트가 아니다.
많은 서방 국가에서, 빨간색은 통상적으로 위험을 나타내는 데 쓰인다.그러나 세계 각지의 일부 지역에서 빨간색은 적극적인 색깔로 여겨진다.
마찬가지로 많은 서양 국가에서 텍스트는 왼쪽에서 오른쪽으로 읽힌다.그러나 어떤 언어에서는 텍스트가 오른쪽에서 왼쪽으로 읽힌다.
i18n이 작용하는 또 다른 예는 이미지에 있다.만약 응용 프로그램의 그림에 텍스트가 포함되어 있다면, i18n을 완전히 지원하기 위해서는 여러 개의 이미지를 생성해야 할 수도 있으며, 모든 이미지는 응용 프로그램에서 지원하는 언어의 정확한 번역을 가지고 있습니다.그리고 응용 프로그램을 사용하는 사용자가 있는 국가에 따라 정확한 이미지를 제공해야 합니다.
AngularConnect에서 이 문제에 대해 멋진 강연을 했습니다.만약 당신이 더 많은 정보를 알고 싶다면, 이 강연을 볼 수 있다.볼만해!

Transloco란 무엇입니까?

Transloco은 NgNeat팀이 개발하고 유지하는 라이브러리입니다.Angular 응용 프로그램을 쉽고 유지보수, 확장, 고성능으로 번역할 수 있도록 대량의 기능과 공식 지원 플러그인을 포함합니다.적극적인 유지 관리 및 지원:

지연 로드

개 이상의 반환

서버측 렌더링

로컬화(l10n)

실행 시 언어 변경

여러 언어를 동시에 사용하여

다원화(공식 플러그인을 통해)

이것은 쉽게 설정하고 사용할 수 있습니다. 우리는 본문의 다음 부분에서 볼 수 있습니다!

각도 어플리케이션에 Transloco 통합

이제는 코드를 작성하는 데 착수할 때가 되었다.처음부터 시작합시다.nodejs과 npm를 설치했다고 가정합니다.만약 그렇지 않다면, 나는 LTS 버전을 사용하는 것을 건의한다!

설치

전역적으로 Angular CLI가 설치되지 않은 경우 원하는 셸에서 다음 명령을 실행합니다.npm install -g @angular/cli그러면 Angular CLI가 글로벌 설치됩니다.이제 Angular CLI를 사용하여 새 애플리케이션을 생성합니다.ng new transloco-test너는 약간의 힌트를 얻을 수 있을 것이다.도서관을 시험적으로 사용하려면 우리는 너무 미친 물건을 필요로 하지 않는다.

➜ ng new transloco-test
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

현재 새로 만든 transloco-test 폴더로 이동해야 합니다. cd transloco-test여기에서 우리는 ng add 명령을 사용하여 Transloco를 응용 프로그램에 추가할 수 있습니다.
주의: ng add 원리도를 실행하면 Transloco는 우리의 프로젝트에서 자동으로 파일을 만들어서 초기 설정 과정을 포함합니다!ng add @ngneat/transloco이 명령을 실행하면 라이브러리의 초기 설정에 대한 힌트를 볼 수 있습니다.현재 기본 설정은 다음과 같습니다.

? 🌍 Which languages do you need? en, es
? 🚀 Are you working with server side rendering? No

우리는 또한 일부 파일을 만들고 업데이트하는 것을 볼 수 있습니다:
이 파일들을 빨리 살펴봅시다.tranloco.config.js - 다른 Transloco 도구에 사용되는 기본 설정 설정을 저장합니다.
이것들은 우리가 번역한 파일을 저장하는 것이다.일반적으로 모든 언어의 파일을 지원합니다.그것들은 키 값 쌍으로 설정되었지만, Transloco는 끼워 넣는 키를 지원합니다.src/assets/i18n/{en|es}.json - 이 파일은 Transloco 모듈, 설정,transpiler와translationloader를 설정합니다.
이 서류를 자세히 봅시다.

@Injectable({ providedIn: "root" })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    // We can see here that the file names of our translations are important
    // They must match the available languages in our app
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        // These strings of available langs must match our translation file names
        availableLangs: ["en", "es"],
        defaultLang: "en",
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: environment.production,
      }),
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
  ],
})
export class TranslocoRootModule {}

이 파일은 Transloco를 저장하여 응용 프로그램의 번역을 위한 설정과 번역 로드 정책을 가져옵니다.
주의해야 할 것은 번역 파일의 파일 이름은 응용 프로그램에서 지원하는 src/app/transloco/transloco-root.module.ts 그룹과 일치해야 한다는 것이다.

템플릿에 번역 추가

Transloco는 우리의 템플릿에서 번역을 얻을 수 있는 다양한 방법을 제공합니다.

파이프

속성 지령

구조 지령

우리 어떻게 순서대로 모든 항목을 완성하는지 봅시다.
우선 availableLangs 폴더의 en.json에 번역을 설정합니다.

{
  "title": "Transloco Test",
  "welcomeText": "Hello {{ name }}"
}

assets/i18n은 welcomeText을 포함하고 있습니다. 이것은 우리가 번역에 전달한 동적 값입니다.
우리는 또한 {{ name }}을 증가시킬 것이다.만약 당신이 원한다면 당신은 스스로 번역할 수 있습니다. 저는 번역 전에 es.json을 더해서 번역 간의 차이를 나타내고 싶습니다.

{
  "title": "ES- Transloco Test",
  "welcomeText": "ES- Hello {{ name }}"
}

ES-을 열고 파일의 모든 내용을 삭제한 다음 다음을 삽입합니다.

<div>
  <h1>{{ 'title' | transloco }}</h1>
  <h3>{{ 'welcomeText' | transloco: {name: 'World'} }}</h3>
</div>

현재 app.component.html을 사용하여 응용 프로그램을 실행하면 다음과 같은 내용을 볼 수 있습니다.

경탄했어Transloco는 우리의 열쇠를 찾았고, 그것을 위해 정확한 번역을 성공적으로 찾았습니다!
우리는 또한 속성 명령을 사용하여 같은 결과를 실현할 수 있다.

<div>
  <h1 transloco="title"></h1>
  <h3 transloco="welcomeText" [translocoParams]="{name: 'World'}"></h3>
</div>

저는 개인적으로 번역에 동적 값을 제공하지 않고 ng serve만 사용할 때 이런 방법의 효과가 매우 좋다고 생각합니다.만약 여러 개의 매개 변수가 있다면, 그것은 혼란스러워질 수 있다.
템플릿에서 번역을 실행하는 마지막 옵션은 구조 명령을 사용하는 것입니다.개인적으로 가장 좋아하는 방법.

<div *transloco="let t">
  <h1>{{ t('title') }}</h1>
  <h3>{{ t('welcomeText', {name: 'World'}) }}</h3>
</div>

이 세 가지 방법의 출력은 같다.그러나 구조 명령 방법을 사용하면 성능 장점이 있다.언어 변경과 변경 검사 주기 동안, 전체 템플릿을 업데이트하기 위해 구독 하나만 사용합니다.
필요한 경우 TS 파일에서 번역을 받을 수도 있습니다.transloco="title"을 열고 app.component.ts을 구조 함수에 주입합니다.

constructor(
    private readonly translocoService: TranslocoService
){}

ngOnInit() {
    // We can then use the service to fetch translations
    const example = this.translocoService.translate('welcomeText', {
      name: 'World',
    });
}

런타임 언어 변경 지원

Transloco의 가장 큰 특징 중 하나는 실행할 때 번역된 언어를 변경할 수 있다는 것입니다.그리고 되게 쉬워요!TranslocoService 파일을 열고 새 방법을 만듭니다.

  switchLanguage() {
    if (this.translocoService.getActiveLang() === 'en') {
      this.translocoService.setActiveLang('es');
    } else {
      this.translocoService.setActiveLang('en');
    }
  }

현재 이 방법을 호출할 때 번역은 app.component.ts에서 en으로 변경됩니다.es을 열고 언어 전환을 위한 버튼을 추가합니다.

<div>
  <h1>{{ "title" | transloco }}</h1>
  <h3>{{ "welcomeText" | transloco: { name: "World" } }}</h3>
</div>

<button (click)="switchLanguage()">Switch Language</button>

현재, 우리가 단추를 눌렀을 때, 우리는 번역 실시간 업데이트를 볼 수 있습니다:

다양한 지원

번역을 설정해서 화면에 보여줄 수 있어서 정말 좋아요. 그런데 다음 장면은요?app.component.html{{ numberOfSeconds }} seconds remaining이 1이면 numberOfSeconds이어야 하지만 그렇지 않습니다. 1 second remaining은 항상 나타납니다.
이게 문제야!그러나 Transloco는 MessageFormat 지원을 추가한 공식 플러그인을 가지고 있습니다.
MessageFormat Plugin은 번역 중인 복수와 성별을 지원하기 위해 저희 프로그램에 쉽게 추가할 수 있습니다.
그것을 어떻게 추가하는지 봅시다.우선 두 개의 새 패키지를 설치해야 합니다.1 seconds remaining그리고 npm i messageformat @ngneat/transloco-messageformat에서 초기화해야 하기 때문에 TranslocoRootModule을 열고 다음 내용을 transloco/transloco-root.module.ts 그룹에 추가합니다.

@NgModule({
  imports: [
    TranslocoMessageFormatModule.init()
  ]
  ...
})
export class TranslocoRootModule {}

봐라!지원이 추가되었습니다.그런데 우리는 그것을 어떻게 사용합니까?imports 번역을 통해 사용 상황을 살펴보겠습니다.{{ numOfResults }} search results을 열고 다음 키 변환 쌍을 추가합니다.

{
    ...,
    "searchResults": "{numOfResults, plural, =0 {no results found} one {1 search result} other {# search results}}"
}

현재 assets/i18n/en.json에 다음 환영 문구를 추가합니다.

<p>{{ t('searchResults', numOfResults) }}</p>

마지막으로 app.component.html에 app.component.ts이라는 새로운 속성을 설정합니다.

export class AppComponent {
    numOfResults = 0;

    ...
}

numOfResults의 값을 변경하여 해당하는 번역 변경 사항을 보십시오!

마지막 인사

본고는 Transloco의 도움으로 Angular 응용 프로그램에서 I18N 지원을 실현하는 것이 얼마나 쉬운지 보여줄 수 있기를 바랍니다.Transloco는 더 많은 기능과 플러그인을 제공하여 당신의 i18n 체험을 더욱 아름답게 합니다.
내가 지적하고 싶은 두 가지 측면은 다음과 같다.

플랫 이동 플랫

Transloco는 중첩 키를 지원합니다.

{
  "aria": {
    "label": "My Translatable A11Y Label"
  }
}

이 문제를 해결하기 위해서, 그것은 적당한 키를 찾기 위해 겹겹이 끼워 넣는 것을 반복해야 한다.Transloco에는 다음과 같이 파일을 플랫화할 수 있는 도구가 있습니다.

{
  "aria.label": "My Translatable A11Y Label"
}

O (1) (대 O 표현) 를 찾을 수 있습니다.문서 링크 구현 방법: https://ngneat.github.io/transloco/docs/tools/optimize

Monorepo 지원

Transloco는 monorepo의 라이브러리나 npm 패키지에서 번역을 추출하여 번역의 위치를 더 많이 제어하여 사용하는 파일에 접근할 수 있는 도구도 있습니다.다음은 Scoped Library Extractor Tool에 대한 문서 링크입니다.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소, GraphQL, Node, Bazel 또는 Polymer 분야의 전문가 구조 지도, 교육 또는 문의는 [thisdotlabs.com](https://www.thisdotlabs.com)을 방문하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용적이고 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdot.co을 참조하십시오.