Пайпы для интернационализации

Angular предоставляет мощный механизм для работы с интернационализацией (i18n), который включает в себя пайпы, предназначенные для форматирования данных в соответствии с локальными стандартами. Пайпы позволяют автоматически адаптировать отображение чисел, валют, процентов и дат в зависимости от выбранной локали приложения.

Локаль и настройка интернационализации

Перед использованием пайпов i18n необходимо настроить локаль. Локаль определяется при сборке приложения или динамически через модуль LOCALE_ID.

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import localeRu from '@angular/common/locales/ru';
import { registerLocaleData } from '@angular/common';

registerLocaleData(localeRu);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: LOCALE_ID, useValue: 'ru-RU' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

В этом примере приложение регистрирует русскую локаль и устанавливает её как локаль по умолчанию.

Пайп DatePipe

DatePipe используется для форматирования дат в соответствии с локалью. Поддерживаются различные форматы: короткий, средний, длинный, полное представление даты.

<p>{{ today | date:'fullDate' }}</p>
<p>{{ today | date:'shortTime' }}</p>
  • fullDate: полная дата с днем недели
  • shortTime: часы и минуты

Можно также задать кастомный формат:

<p>{{ today | date:'dd.MM.yyyy HH:mm' }}</p>

DatePipe автоматически использует настройки локали, поэтому месяцы и дни недели будут отображаться на выбранном языке.

Пайп CurrencyPipe

CurrencyPipe позволяет форматировать числовые значения в денежные суммы.

<p>{{ price | currency:'USD':'symbol':'1.2-2' }}</p>
<p>{{ price | currency:'EUR':'code' }}</p>
  • 'USD' — валюта
  • 'symbol' — отображение символа валюты (например, $)
  • 'code' — код валюты (например, USD)
  • '1.2-2' — формат числа: минимум 1 цифра перед запятой, минимум 2 и максимум 2 цифры после запятой

Пайп учитывает локаль и применяет правильное разделение тысяч и десятичных знаков.

Пайп DecimalPipe

DecimalPipe используется для форматирования чисел с учетом локали.

<p>{{ 12345.6789 | number:'1.0-2' }}</p>
  • '1.0-2' — минимум 1 цифра до запятой, минимум 0 и максимум 2 цифры после запятой

Пример работы в локали ru-RU: 12 345,68 В локали en-US: 12,345.68

Пайп PercentPipe

PercentPipe преобразует число в процентное значение:

<p>{{ 0.256 | percent:'1.0-1' }}</p>

Результат для ru-RU: 25,6 % Результат для en-US: 25.6 %

Формат '1.0-1' задает количество цифр до и после запятой.

Использование нескольких пайпов вместе

Пайпы можно комбинировать для создания более сложного вывода:

<p>{{ price | currency:'USD':'symbol':'1.2-2' | uppercase }}</p>

В этом примере значение валюты будет отображено в верхнем регистре.

Динамическая смена локали

Для динамической смены локали в рантайме можно использовать LOCALE_ID через инжекцию:

import { Component, Inject, LOCALE_ID } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<p>{{ today | date:'fullDate' }}</p>`
})
export class AppComponent {
  constructor(@Inject(LOCALE_ID) private locale: string) {}
}

Изменение LOCALE_ID во время выполнения требует пересборки пайпов или перезагрузки компонентов, так как пайпы интернационализации вычисляются на основе текущей локали при рендеринге.

Особенности использования

  • Все встроенные пайпы интернационализации учитывают локаль приложения.
  • Для нестандартных локалей необходимо регистрировать их через registerLocaleData.
  • Пайпы поддерживают кастомные форматы через строковые шаблоны.
  • Для сложных случаев форматирования чисел или дат можно создавать собственные пайпы, наследуя функциональность встроенных.

Эти пайпы обеспечивают удобный и универсальный способ адаптации приложения под любую локаль, делая вывод данных корректным и понятным для пользователей по всему миру.

Оглавление