はじめに
日々Qiitaの集合知に感謝。lovedと申します。
今回はAngular7で軽く詰まった点を共有致します。お役立て下さいませ。
お題
Angularでi18n対応する場合にはAngular公式のi18n機能とは別に、
ngx-translateが使用可能です。
今回はngx-translateを使用して、動的に多言語文言をアプリの中に組み込む方法を解説します。
理解していると「なるほど、まぁそうだよな」という話ですが、誰かの助けになれば幸いです。
対象読者
Angular7でのi18n対応に追われる諸兄姉の皆様
基本的な入れ方・使い方は下記投稿に親切な解説があります。
https://qiita.com/daikiojm/items/def764b12c8ff2ebbc92
シンプルに使用する場合
<span translate>多言語対応したい文言</span>
<input [type]="'text'" placeholder="{{'多言語対応文言' | translate }}"></span>
Angularでhtmlに{{}}パイプをする場合は、属性名に[]を付けないよう注意しましょう。
(良いエディタだと怒られるので心配ありませんが)
動的に使用する場合(本題)
例えば下記ポップアップをi18nしたいとします。
window.confirm('こうかいしませんね？');
この場合は上記のシンプルな方法では実現できません。(できたらすみません!)
以下のようにhtml内に隠し要素を記載して取得できます。
<span [hidden]="true" id="confirm-i18n-text" translate>こうかいしませんね？</span>
// 簡略に記載
window.confirm(document.getElementById('confirm-i18n-text').innerText);
ngIfの場合は[hidden]と違い、DOMに現れないので基本的には外から見えません。
こちら訂正しました。DOMから取得するのでngIFでは動作しない恐れがありますm(__)m
たくさんある場合はi18n文言部分のみ別コンポーネントとして切り出し、includeするとよいでしょう。
切り出し~includeは動作確認していないので、うまく動作しない場合は工夫してみて下さい。
以上です。
御観覧ありがとうございました。
余談ですが、、、
慣れてくると、AngularJSには戻れませんね。
これまでは「npmこわい」「CDNと$scopeがあれば食っていける」とか思っていたこともありましたが、
今では新規にフロントエンドを構築しようと思ったらAngularを選択したい、いやすると思います。