Angular 5 사이트의 기본값으로 브라우저 언어 설정

Question

Angular 5.1.1을 사용하고 사이트에 여러 언어를 추가하여 방문자가 원하는 언어를 선택할 수 있도록하거나 브라우저에서 구성한 언어를 기본값으로 설정할 수 있습니다. 우리는 Angular.io 사이트에 대한 모든 국제화 (i18n) 지침을 밟았으며, 사용자는 하나의 대체 언어 만 가질 수 있으며 브라우저에서 설정된 언어를 감지하는 방법에 대한 안내는 없으며 단일 및 대상 언어.

여러 언어를 사용할 수있는 방법과 브라우저 구성 언어에 따라 기본 언어를 변경할 수있는 방법에 대해 알려줄 수 있습니까? 우리가 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을 설정하기 위해 우리에게 활성 세션 내에서 그들 사이를 전환하는 방법을 모른다 방법은 다음과

이다 그러나 이것은 단지 열심히에 나타납니다 하나의 언어 코드

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(); 
});