見出し画像

Angularの多言語対応について

Angularでは標準で多言語対応をサポートしています。

アプローチは、HTMLを書くときに多言語対応したいところをマーキングして、ng i18nで抽出して言語ファイルを作成、言語ごとにビルドします。

詳しくは公式を見てください。

https://angular.io/guide/i18n

今の今まで、Angularのi18nはHTMLだけの対応だと思っていました。

<th i18n="@@jobLog.startTime">開始日時</th>

処理が終わったときにメッセージを出すことがありますので、これをどうやって実現するのかをググって見ると、以下の方法が見つかります。

* HTMLタグとして書いておいて、コードから参照する
* ngx-translateパッケージを使う

私は、前者のアプローチを使っていました。

そして先ほど、改めてググって見ると、コードで書いたものをi18nの対象にする方法を見つけました。

$localizeを使えばいいんだそうです。

例えば以下のような感じです。

const msg = $localize`:@@invoiceUploader.successUpload:請求書データをアップロードしました`;
this.toastService.success(msg);

これはすごい発見です。

めっちゃ楽です。


この記事が気に入ったらサポートをしてみませんか?