В этом видео мы поговорим об интергационализации (i18n) в Angular. Интернационализация — это процесс адаптации проекта (данных) под местные (локальные) стандарты. Например разделители в десятичных числах и пр.
Angular имеет собственную поддержку i18n (@angular/localize пакет). Добавить пакет в проект можно с помощью команды ng add @angular/localize.

@angular/localize позволяет создавать мультиязычные приложения. Но для каждого языка придется собирать отдельный билд. К тому же хранение переводов организовано в специфичных (xml подобных) файлах (.xlf). Поэтому существует более простое и популярное решение для создания мультиязычного приложения с мощным апи ngx-translate.

app.ts

import { Component, inject } from '@angular/core';
import { MatToolbar } from '@angular/material/toolbar';
import { CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, registerLocaleData } from '@angular/common';
import localeRu from '@angular/common/locales/ru';
import localeFr from '@angular/common/locales/fr';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { MatButton } from '@angular/material/button';

registerLocaleData(localeRu);
registerLocaleData(localeFr);

@Component({
  selector: 'app-root',
  imports: [MatToolbar, DatePipe, CurrencyPipe, DecimalPipe, PercentPipe, TranslatePipe, MatButton],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})
export class App {
  protected today = new Date();

  private translate = inject(TranslateService);

  constructor() {
    this.translate.addLangs(['en', 'ru']);
    this.translate.setFallbackLang('en');
    this.translate.use('en');
  }

  protected changeLang() {
    this.translate.use(this.translate.getCurrentLang() === 'en' ? 'ru' : 'en');
  }
}

app.html

<header>
  <mat-toolbar color="primary">
    <span>{{'APP.TITLE' | translate}}</span>
  </mat-toolbar>
</header>

<p>Date: {{today | date : 'MMM d, y, HH:mm:ss a': '+0200' : 'fr'}}</p>

<p>Currency: {{125 | currency : 'EUR' : 'symbol-narrow' :  '1.1-1' : 'fr'}}</p>

<p>Number: {{12.45 | number : '1.1-1' : 'fr'}}</p>

<p>Percent: {{0.25 | percent : '1.0' : 'ru'}}</p>


<button mat-button (click)="changeLang()">Chang lang</button>

app.config.ts

import {
  ApplicationConfig,
  InjectionToken,
  provideBrowserGlobalErrorListeners,
  provideZonelessChangeDetection
} from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideTranslateService } from '@ngx-translate/core';
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';

export const API_URL = new InjectionToken<string>('API_URL');

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZonelessChangeDetection(),
    provideRouter(routes),
    provideTranslateService({
      loader: provideTranslateHttpLoader({
        prefix: '/i18n/',
        suffix: '.json',
      }),
      fallbackLang: 'en',
      lang: 'en',
    }),
    { provide: API_URL, useValue: 'https://jsonplaceholder.typicode.com/' },
  ],
};

Angular Internationalization. ngx-translate

app.ts

app.html

app.config.ts

0 Comments

Submit a Comment Отменить ответ

Pin It on Pinterest