【Angular】ngx-translateの落とし穴

はじめに

本記事はAngular Advent Calendar 2021の5日目の記事になります。
翻訳ライブラリのngx-translateについてハマった点について記載します。
クオリティは期待しないでください。

去年書こうと考えていましたが、その月は350時間越えで書けなかったため
今書きます。。。

ngx-translateとは

冒頭にも記載してある通り翻訳してくれるライブラリになります。
Angularとしては、もともとi18n機能はありますが、
ビルドして切り替えたり、辞書ファイルの設定が複雑なため
正直好きではないです。

ngx-translateは、jsonファイルで定義する形となるため
以下の点が優れています。

・保守性
・設定の安易さ
・jsonエディタとの連携

Angularとのバージョンについて

最新のバージョンまでサポートしていますが、
Angularのバージョンを13に上げる際は、ngx-translateのバージョンも14へ上げる必要があります。
詳細は参考文献のngx-translate-coreにて確認すること。

設定について

ja.json

{
    "qiita": {
        "title": "キータ",
        "title2": "キータ{{test}}"
    }
}

test.html

<!-- 設定方法1-->
<span>{{'qiita.title' | translate}}</span>

<!-- 設定方法2-->
<span [translate]="'qiita.title'"></span>

<!-- プレースホルダに設定する場合 -->
<input type="text" placeholder="{{'qiita.title' | translate}}"/>

<!-- パラメータが存在する場合-->
<span 
 [translate]="'qiita.title2'"
 [translateParam]="{test: 'aaaa'}"></span>

落とし穴

下記のようにtestパラメータに値を入れている場合は正常に表示されますが、
変数をバインドしている際にその変数がnullやundefinedの場合、
キータ{{test}}のようにそのまま出てしまうため注意が必要

test.html

<!-- 落とし穴1-->
<span 
 [translate]="'qiita.title2'"
 [translateParam]="{test: 'aaaa'}"></span>

2つ目の落とし穴です。
2番目のspanタグの場合、改行が入るため1番目と差異が出てしまいます。
残念ながらTrimはしてくれません。
この影響でデザイン崩れが発生し過去の案件でダメージを受けました。。
解消方法は[translate]を利用するか、改行前に{{で始める必要があります。
正直可読性を考慮すると2番目で書きたいのが本音ではあります。
解消方法知っている人がいたら教えてください。

test.html

<!-- 落とし穴2-->
<span>{{'qiita.title' | translate}}</span>
<span>
  {{'qiita.title' | translate}}
</span>

参考文献

• ngx-translate-core