如何使用 i18nextBrowserLanguageDetector 的结果

Question

我正在尝试使用 i18nextBrowserLanguageDetector 来检测用户的浏览器语言设置，如果我们支持他们的首选语言，则将他们重定向到翻译后的页面。下面代码的第一部分似乎工作正常，并且会在 cookie 中正确缓存用户的语言偏好。

import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';

i18next
  .use(LngDetector)
  .init({
    detection: {
      // order and from where user language should be detected
      order: ['cookie', 'navigator', 'htmlTag', 'path'],

      // keys or params to lookup language from
      lookupCookie: LANG_COOKIE,
      lookupFromPathIndex: 0,

      // cache user language on
      caches: ['cookie']
    }
  });

但是，我遇到的问题是我想根据用户的语言设置做一些事情，但 i18next 似乎异步运行他们的检测代码，但没有提供我可以看到的任何回调。部分问题是他们的文档真的很薄。我所做的是在准备好的文档上添加一些代码，如下所示：

document.addEventListener('DOMContentLoaded', () => {
  const langPref = Cookies(LANG_COOKIE);
  if (!!langPref && SUPPORTED_LANGS.includes(langPref) && langPref !== currentLocale())
    window.location.href = `${location.origin}/${langPref}${location.pathname}`;
});

但是页面完成加载时，语言 cookie 永远不会设置。我可以添加一个 setTimeout/Interval，但这有点笨拙且效率低下。

Answer 1

如何使用：

i18next.on('languageChanged', function(lng) {
    window.location.href = `${location.origin}/${lng}${location.pathname}`;
});)

也使用白名单选项，因此 lng 始终是您所支持的；)

• 事件：https://www.i18next.com/overview/api#events
• 白名单：https://www.i18next.com/overview/configuration-options#languages-namespaces-resources