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

将浏览器语言设置为Angular 5站点的默认语言

1 个答案: