Angular 5サイトのデフォルトとしてブラウザ言語を設定

Question

Angular 5.1.1を使用しており、訪問者が希望の言語を選択できるように複数の言語を追加しようとしています。私たちはAngular.ioサイトに関するすべての国際化（i18n）のガイダンスを完了しました。あなたは1つの代替言語しか持たないことを示唆しています。ブラウザで設定された言語を検出する方法や、目標とする言語。

複数の言語を使用できるかどうか、ブラウザの設定言語に基づいて表示されるデフォルト言語をどのように変更することができますか？ここで

たちはXLIFFファイルをロードしている方法ですが、我々はアクティブなセッション内でそれらを切り替えるには、方法がわからない

const translations = [ 
    require(`raw-loader!./app/locale/messages.en.xlf`), 
    require(`raw-loader!./app/locale/messages.fr.xlf`), 
    require(`raw-loader!./app/locale/messages.pt.xlf`), 
]; 

const providers = [ 
    { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } }, 
    { provide: APP_BASE_HREF, useValue: params.baseUrl }, 
    { provide: 'BASE_URL', useValue: params.origin + params.baseUrl }, 
    { provide: TRANSLATIONS, useValue: translations }, 
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' } 
]; 

ガイダンスはLOCAL_IDを設定することを教えてくれるが、これはちょうど、ハード見えます1つの言語をコードする

providers: [ 
    { provide: 'BASE_URL', useFactory: getBaseUrl }, 
    { provide: LOCALE_ID, useValue: 'en-US' } 
] 

Answer 1

ブラウザに基づいて動的に言語を読み込むための本当に良い解決策を見ました。基本的にはあなただけの翻訳のための新しいプロバイダを作成する必要がありますし、そのプロバイダ内の次の操作を行います

let locale = query the default language of the browser here and store it! 

const file = `/path/to/translations/site.${locale}.xlf`; 

そして最後の約束としてそれをバックパス：使用するブラウザの言語を取得し、どのように

return new Promise(function (resolve, reject) { 
    const xhr = new XMLHttpRequest; 
    xhr.open('GET', file); 
    xhr.onload = (data: any) => resolve(
    [ 
     { provide: TRANSLATIONS, useValue: data.target.response }, 
     { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }, 
     { provide: LOCALE_ID, useValue: locale } 
    ] 
); 
    xhr.onerror =() => reject(noProviders); 
    xhr.send(); 
});