aotコンパイルでAngularで代替i18n言語リンクを提供するにはどうすればよいですか？

Question

私は現在Angularアプリのi18nに取り組んでいます。私は、hereのように、事前にコンパイルされたアプリケーションを作成するためにxlfファイルでAOTコンパイルを使用します。ビルドでは、言語固有のベースhref（--base-href parmを使用）を提供します。たとえば、これは意味、私は以下のURLパスを使用して、2つの言語特定のアプリで終わる：

• /APP_PATH/EN/...
• /APP_PATH /デ/ ...

これで、アプリ内でそれぞれの代替言語へのリンクを提供したいと考えています。アクティブURLのenをdeに置き換えてください。私はルータの注入を使用したので、私はそのURLプロパティにアクセスすることができますが、このプロパティは私に完全なURLを与えません base-hrefを含んでいます。

Angularアプリ内でベースURLを確認するにはどうすればよいですか？

また、アプリが作成された言語を見つける方法はありますか？何とかxliffファイルからtarget-languageプロパティにアクセスできますか？ （ルータが必要な理由はわからない）

Answer 1

まず、角度は、ルータや場所のオブジェクトを挿入してみましょう：

constructor(private router: Router, private location: Location) {} 

を次に、ベースパスを決定するために（ベースHREF）：最後に

let fullpath = this.location.prepareExternalUrl(this.location.path()); 
let basepath = fullpath.substr(0, fullpath.lastIndexOf(this.location.path().substr(1))); 

、これはあなたが（urlsで）代替言語のURLのリストを作成する方法です。

const languages = ["en", "de", "fr", "it"]; // List of available languages 
let urls = []; 
for (let lang of languages) { 
    let url = basepath.replace(/\/(..)\/$/, "/" + lang + "/") + this.location.path().substr(1); 
    if (url !== fullpath) { 
    urls.push(url); 
    } 
} 

ありませんbasepath.replaceはスラッシュの間に2文字の言語コードを仮定しています。これは、若干強化された正規表現を必要とする "en-us"のようなものでは機能しません。私はまだ実行中のアプリケーションの言語を特定する方法をまだ見つけていません。

Answer 2

あなたがNGのビルドプロセスにロケールを設定し、さまざまな言語用にアプリをコンパイルします。

./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf 

あなたのコンポーネントにそれを注入することによって、このロケールへのアクセスを得ることができます。

import { Inject, LOCALE_ID } from '@angular/core'; 
... 
constructor(@Inject(LOCALE_ID) locale: string, ... 

ロケール文字列を使用すると、現在の言語を判別できます。上記の例では、ロケールは「es」に設定されていました

希望すると便利です