Плюрализация

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

Синтаксис и структура

@Component({
  selector: 'app-example',
  template: `
    <div>{{ messages.length | i18nPlural: messageMapping }}</div>
  `
})
export class ExampleComponent {
  messages = [1, 2, 3];
  messageMapping: { [k: string]: string } = {
    '=0': 'Нет сообщений',
    '=1': 'Одно сообщение',
    'other': '# сообщений'
  };
}

  • messages.length — числовое значение, на основе которого выбирается форма.

  • messageMapping — объект, где ключи задают конкретные правила:

    • =0, =1, =2 и т.д. — точные совпадения чисел.
    • other — правило по умолчанию для всех остальных значений.

  • # внутри строки автоматически заменяется на текущее числовое значение.

Поддержка различных языков

  • Для каждого языка можно использовать разные правила, учитывая особенности плюрализации.
  • В Angular для интернационализации применяется модуль @angular/common с настройкой локали.
  • Пример для русского языка:
messageMapping: { [k: string]: string } = {
  '=0': 'Нет сообщений',
  '=1': 'Одно сообщение',
  '=2': 'Два сообщения',
  '=3': 'Три сообщения',
  'few': '# сообщения',
  'many': '# сообщений',
  'other': '# сообщений'
};

Ключи few и many соответствуют правилам языка, позволяя корректно отображать количество.

Практические рекомендации

  • Всегда указывать other как запасной вариант, чтобы избежать ошибок при неожиданных числах.
  • Для сложных форм чисел и грамматических правил использовать объектные схемы с несколькими ключами (one, few, many, other).
  • Комбинировать с анимациями для динамичного обновления текста при изменении данных.

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

Оглавление