AngularでのICUメッセージ

AngularでのICU MessageFormat

AngularはテンプレートでICU MessageFormatをネイティブにサポートしています。サードパーティライブラリが必要なReactとは異なり、AngularのI18nシステムはpluralおよびselect式のICU構文を直接理解します。

テンプレートでの基本使用

<p i18n>
  {count, plural,
    =0 {No items}
    =1 {One item}
    other {{{count}} items}
  }
</p>

注意：Angularテンプレートでは、変数補間にICUの{count}ではなくAngular構文の二重波括弧{{count}}を使用します。

性別のSelect

<p i18n>
  {gender, select,
    male {He}
    female {She}
    other {They}
  } updated the document.
</p>

i18n属性

翻訳対象の要素をi18n属性でマーク：

<h1 i18n="Page title|Title for the main page">Welcome</h1>

メッセージの抽出

ng extract-i18n --output-path src/locale

マークされたすべてのメッセージを含むXLIFFファイルを生成します。

制限事項

• Angularの組み込みi18nはコンパイル時 -- リロードなしで実行時にロケールを切り替えることはできない
• 実行時のロケール切り替えには@ngx-translateや@ngneat/translocoを検討