2016-04-22 5 views
5

Система, над которой я работаю, состоит из нескольких распределенных микросервисов с потенциально несколькими версиями каждого компонента, активных одновременно.Загрузка динамического компонента из внешнего содержимого

Приложение Angular2, которое я пытаюсь построить, должно иметь возможность взаимодействовать с каждым из этих компонентов с помощью websockets. Поскольку представляется невозможным подготовить это приложение для всех будущих версий и функций каждого компонента, соответствующей реализации протокола и даже новых компонентов, я хотел бы возложить эту ответственность на сами компоненты.

Каждый компонент может передавать свои возможности (в виде компонента NG2), а также реализацию протокола и необходимые элементы GUI (HTML/CSS) через пакет, отправленный по тому же соединению с websocket.

Есть ли шаблон, который позволяет использовать этот тип «по требованию» компонентов и их шаблонов в ng2?

+0

Могут ли каждый компонент жить на своем собственном уровне на верхнем уровне страницы (тела), каждый из которых является самостоятельным Угловым приложениями, которые просто общаются друг с другом или им нужно вложить в себя, как настоящие компоненты. –

+0

Нет необходимости, чтобы компоненты были вложенными или взаимодействовали друг с другом, но они должны иметь возможность обмениваться услугами и библиотеками. –

+1

Что-то вроде http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-component-in-angular-2/36566919?noredirect1_comment60736661_36566919 будет работать, я думаю. Я не знаю, как это сделать с приложениями, загружаемыми в разное время. Например, как заставить одно приложение найти класс другого после минимизации, когда имена искажены. –

ответ

1

Я не совсем уверен, полностью ли я понимаю ваш вопрос.

Есть ли шаблон, который позволяет использовать этот тип «по требованию» компонентов и их шаблонов в ng2?

Ну есть по требованию загрузки модулей, с помощью ленивых загруженных модулей, см: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load Я настоятельно рекомендую прочитать все это руководство, это действительно полезно.

но они должны иметь возможность обмениваться услугами и библиотеками.

Руководство по углам предлагает общий модуль и основной модуль для этого. На самом деле я думаю, что это действительно лучший способ сделать это. Просто прокрутите вниз ссылку выше.

Каждый компонент может сообщить о своих возможностей (в виде компонента NG2), а также реализации протокола и необходимых элементов графического интерфейса (HTML/CSS) через пакет пересылается по той же самой связи WebSocket.

Это та часть, о которой я не знаю, как будто я не знаю, правильно ли я понимаю, что вы имеете в виду. Вы не хотите загружать компонент через соединение с websocket? Если да, то почему? Если вы имеете в виду только связь для каждого компонента с одним и тем же веб-сайтом: я бы рекомендовал услугу, которая будет частью Core Module и, следовательно, будет Singleton. Затем компоненты могут получить доступ к этой службе, и поэтому они всегда подключены к одному и тому же веб-узлу.

+1

Благодарим вас за ответ. Я реализовал прототип, основанный на ответах бергбена и кемского. К сожалению, я не могу разделить щедрость равномерно по обеим постам. Монетный флип решил дать щедрость бербмену. –

2

Похоже, вы можете попытаться использовать ленивую загрузку маршрутизатора и обеспечить пользовательскую реализацию NgModuleFactoryLoader, которая может загружать компоненты через websocket.

+0

Не могли бы вы рассказать об этом? –

+0

Функциональные модули Lazy для загрузки - это встроенная функциональность маршрутизатора, загрузка может быть настроена путем обеспечения реализации NgModuleFactoryLoader. Поэтому, если вы хотите загружать модули с помощью сетевых сокетов, вам необходимо предоставить пользовательский загрузчик. – kemsky

+0

NgModuleFactoryLoader ожидает, что будет реализован метод загрузки (путь: строка). Вы предлагаете: получить строку скомпилированного feature_module.js через websocket, сохранить его во временный файл, связать путь временных файлов с пользовательской реализацией NgModuleFactoryLoader? –

0

Ниже приведены шаги, которые могут быть достигнуты. погрузчик

  • использовать systemjs для загрузки компонентов в маршрутизаторе ``
  • в вашем systemjs конфигурационного файла указать путь компонента

этих examples explans более подробно.

Смежные вопросы