组成一个大型的Aurelia应用程序-一页上包含多个应用程序

Question

因此，我有一个由功能组成的大型应用程序。每个功能都可以通过菜单访问，该菜单实际上会加载一个包含该特定功能的aurelia应用程序的网页。这很好，因为它允许我一次完成一项功能，并在使用过程中使用可能不同的客户端技术。

但是，我现在需要在一个页面上拥有多个Aurelia应用程序：上述的“功能”应用程序和一个始终位于顶部导航栏中的“ navbar”应用程序。因此安排如下。

我正在使用带有aurelia webpack插件的webpack。我已经尝试了各种安排来使它起作用，但是我动不动就遇到问题。我当前的模型是从单个webpack配置文件中手动引导“功能”应用程序和“导航”应用程序：

entry: {
    packages: [
        "main","nav"
    ]
},

在每个模块中，我都手动引导，例如：

bootstrap((aurelia: Aurelia) => {
    // init code
    aurelia.start())
    .then(() => aurelia.setRoot(PLATFORM.moduleName("app"), document.querySelector("#packages-app")));});

因此，“功能”应用程序被加载到特定的DOM元素中，与“导航”应用程序类似。

我的问题

1. 这是一种受支持的，甚至是适当的功能分割方法吗？
2. 我似乎在一个影响另一个模块的代码中得到了代码。在每个应用程序的模块中注入DI的Aurelia组件是否有共享状态？

Answer 1

这是一个完全有效的方案，您在Aurelia Webpack Plugin - aureliaApp option - "module not found"

回答的另一个问题中

  

这是支持功能，甚至是适当的功能拆分方法吗？

是的，这是完全有效的方案，您可能并不孤单地这样做

  

我似乎在一个影响另一个模块的模块中获得了代码。将DI注入每个应用程序的模块中的Aurelia组件是否有共享状态？

通常在Aurelia应用中，利用DI来处理此问题。所以你可以做的是 预先注册您的商店实例，例如：

// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';

// precreate store instance
const the_one_and_only_store = new Store(initState, options);

// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
  // do your configuration
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('topnav'),
      document.querySelector('#topnav')
    );
});

// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
  // aurelia.use.standardConfiguration();
  // ...
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('app'),
      document.querySelector('app')
    )
});

现在两个应用程序中的所有Store注入都将指向您唯一的商店。