组成一个大型的Aurelia应用程序-一页上包含多个应用程序 [英] Composing a large'ish Aurelia app - multiple apps on one page

问题描述

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

So I have a large application which is composed of features. Each feature is accessible via a menu which essentially loads a web page containing an aurelia app for that particular feature. This is working fine as it allows me to complete a feature at a time and use potentially different client-side technologies as I go.

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

However, I now need to have more than one Aurelia app on a single page: the "feature" app described above and a "navbar" app which will always sit in the top navbar. The arrangement is thus like below.

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

I am using webpack with the aurelia webpack plugin. I have tried various arrangements to get this to work, but I hit issues at every turn. My current model is to manually bootstrap the the "feature" app and the "nav" app from a single webpack config file:

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

在这些模块的每个模块中，我都手动进行引导，例如:

In each of these modules I manually bootstrap, for example:

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

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

So, the "features" app is loaded into a particular DOM element, similarly for the "nav" app.

我的问题

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

推荐答案

这是一个完全有效的方案，您在

This is a totally valid scenario, as answered in another question by you at Aurelia Webpack Plugin - aureliaApp option - "module not found"

这是一种受支持的，甚至是适当的功能拆分方法吗?

Is this a supported or even an appropriate way to split functionality?

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

Yes it's a totally valid scenario and you are probably not alone doing this

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

I seem to get code in one module affecting the other. Is there any way an Aurelia component which is DI injected into modules in each app have shared state?

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

Normally in Aurelia apps, DI is leveraged to handle this. so what you can do is to register your store instance in advance, for example:

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

Now all Store injection in both apps will be pointed to your only store.

这篇关于组成一个大型的Aurelia应用程序-一页上包含多个应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！