首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在应用程序之间共享i18next实例而不覆盖

在应用程序之间共享i18next实例而不覆盖
EN

Stack Overflow用户
提问于 2020-06-23 09:22:41
回答 1查看 1.7K关注 0票数 1

我目前正在致力于国际化的一个系统,建立与单一水疗(微前端)与应用程序的角度和反应。我开始使用i18next,它运行得很好,但是,当我试图在所有应用程序之间共享i18next依赖时,我发现了一个问题。

当两个应用程序同时挂载在视图上时,加载的应用程序将覆盖i18next实例,因此永远找不到第一个应用程序的翻译,因为它们没有加载在后者上。

提前感谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-23 13:02:57

更好的做法是,I18next将在 shell 级别使用shell名称空间初始化,并且每个内部spa都将其名称空间添加到共享实例中。

这样,就不会有实例和代码的重复。

您可以使用i18next.addResourceBundle来添加与当前内部应用程序相关的翻译资源。

代码语言:javascript
运行
复制
i18next.addResourceBundle('en', 'app1/namespace-1', {
// ----------------------------------^ nested namespace allow you to group namespace by inner apps, and avoid namespace collisions
  key: 'hello from namespace 1'
});

将i18next实例作为道具传递给内部应用程序。

代码语言:javascript
运行
复制
// root.application.js

import {i18n} from './i18n';
// ------^ shells i18next configured instance

singleSpa.registerApplication({
  name: 'app1',
  activeWhen,
  app,
  customProps: { i18n, lang: 'en' }
});
代码语言:javascript
运行
复制
// app1.js

export function mount(props) {
  const {i18n, lang} = props;

  i18n.addResourceBundle(lang, 'app1/namespace-1', {
    key: 'hello from namespace 1',
  });
  return reactLifecycles.mount(props);
}

希望这个想法是明确的:] 1:https://www.i18next.com/how-to/add-or-load-translations#add-after-init

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62531428

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档