编写一个大型的 Aurelia 应用程序 - 一个页面上的多个应用程序

Question

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

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

我正在使用带有 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 用于处理此问题。所以你可以做的是 提前注册你的 store 实例，例如：

// 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 注入都将指向您唯一的商店。