Создание большого приложения Aurelia - несколько приложений на одной странице - PullRequest
Новая
       29

Создание большого приложения Aurelia - несколько приложений на одной странице

0 голосов
/ 25 февраля 2019

Итак, у меня есть большое приложение, которое состоит из функций.Каждая функция доступна через меню, которое по существу загружает веб-страницу, содержащую приложение aurelia для этой конкретной функции.Это работает нормально, так как позволяет мне завершать функцию за раз и использовать потенциально разные технологии на стороне клиента.

Однако теперь мне нужно иметь более одного приложения Aurelia на одной странице: описанное выше «функциональное» приложение и приложение «navbar», которое всегда будет находиться на верхней панели навигации.Таким образом, расположение выглядит следующим образом.

enter image description here

Я использую webpack с плагином aurelia webpack.Я пробовал различные меры, чтобы заставить это работать, но я сталкиваюсь с проблемами на каждом шагу.Моя текущая модель состоит в том, чтобы вручную загрузить приложение «feature» и приложение «nav» из одного файла конфигурации веб-пакета: 

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

В каждом из этих модулей я вручную запускаю загрузку, например: 

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

Итак, приложение «функции» загружается в определенный элемент DOM, аналогично приложению «nav».

Мои вопросы

  1. Это поддерживаемый или даже подходящий способ разделения функций?
  2. Мне кажется, что код в одном модуле влияет на другой.Есть ли способ, чтобы компонент Aurelia, который вводится в модули в каждом приложении, имел общее состояние?

1 Ответ

0 голосов
/ 25 февраля 2019

Это полностью допустимый сценарий, как вы ответили в другом вопросе на Aurelia Webpack Plugin - опция aureliaApp - "модуль не найден"

Это поддерживается илидаже подходящий способ разделить функциональность?

Да, это вполне допустимый сценарий, и вы, вероятно, не один делаете это

Кажется, я получаю код в одном модуле, влияющий наДругой.Есть ли какой-нибудь способ, чтобы компонент Aurelia, который вводится в модули DI в каждом приложении, имел общее состояние?

Обычно в приложениях 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 в обоих приложениях будут направлены на ваш единственный магазин.

...