Как общаться из одной библиотеки angular в другую?

У меня есть это угловое приложение, которое в основном использует концепцию библиотек.

У меня есть две библиотеки с именами Lib1 и lib2, сгруппированные в соответствии с микросервисом, которому они служат.

Теперь я импортирую эти библиотеки в основное приложение, то есть App1, и все было до сих пор.

Теперь в Lib1 есть компонент UploadComponent, который отвечает за загрузку всех типов медиафайлов, видео, изображений, документов и т. д., который отлично работает при независимом использовании в App1 с помощью селектора компонентов или загрузки через маршрут.

В Lib2 есть компонент CreateComponent, которому нужна функция загрузки, поэтому я импортирую UploadComponent и вызываю его внутри модального окна. Но после завершения загрузки этот компонент выдает какое-то сообщение, но я не могу его зафиксировать, потому что Createcomponent и UploadComponent находятся в разных библиотеках.

Кто-нибудь знает, как справиться с этой ситуацией?


microservices angular micro-frontend angular-library
person Sam    schedule 03.04.2019    source источник
comment
Для этого вы можете реализовать шаблон pub-sub. Создайте сервис, который будет публиковать события из любого места, и каждый может подписаться на это событие.   -  person Johar Zaman    schedule 03.04.2019
comment
Спасибо @JoharZaman. Я уже реализовал шаблон pub-sub в Lib1, где находится uploadComponent, но невозможно опубликовать в Lib1 и подписаться в Lib2. Не могли бы вы поделиться кодом, как может происходить взаимодействие между библиотеками с использованием шаблона pub-sub?   -  person Sam    schedule 03.04.2019
comment
Вы можете создать класс обслуживания и экспортировать его экземпляр как переменную, чтобы вы могли импортировать его куда угодно. Например: javascript export class EventsServiceFactory { constructor() { } } export const EventsService = new EventsServiceFactory(); Таким образом вы можете импортировать EventsService куда угодно.   -  person Johar Zaman    schedule 03.04.2019
comment
EventsServiceFactory может иметь две функции publish('name of event') и subscribe('name of event'). Что вы можете сделать, так это в uploadComponent, когда загрузка завершена, вы можете опубликовать событие (с именем «UploadCompleted») и вы можете подписаться на событие «UploadCompleted» в другом компоненте.   -  person Johar Zaman    schedule 03.04.2019
comment
@JoharZaman, но этот подход не будет работать вне библиотеки   -  person Sam    schedule 03.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Будет два разных способа, с помощью которых вы можете общаться через два разных микроприложения или называемые библиотеками angular. Пожалуйста, следуйте инструкциям: -

  1. Предположим, у вас есть два библиотечных проекта, работающих в одном приложении angular [пользователи и персонал].
  2. В staff.module.ts вам нужно импортировать UsersModule в массив импорта.
  3. Затем вы можете использовать в компонентах персонала HTML, где вы можете передавать данные в приложение пользователей, как показано ниже.
  4. <users [listingFilterData]="filterObject"></users>
  5. В файле ts пользовательского компонента вы можете использовать директиву @Input для получения данных объекта «listingFilterData» и обработки данных в пользовательском компоненте, и результат будет обновлен в компоненте персонала.

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

Отправка события из одного компонента: -

 document.dispatchEvent(
  new CustomEvent(name, { detail: body })
);

Слушайте событие в другой компонент

  document.addEventListener(name, handler);

Надеюсь, это поможет.

person jagjeet    schedule 13.05.2020