Взаимодействие между приложениями Angular и React

Question

В моем приложении у меня есть 2 приложения на одной странице - одно приложение Angular, а другое приложение React.

Приложение Angular является боковой панелью, а приложение React является основным компонентом. Оба эти приложения нуждаются в информации друг от друга. Это возможно?

Я бы хотел не использовать для этого локальное хранилище или серверную часть, поскольку совместно используемая информация очень динамична и часто меняется (например, нажатие кнопки в режиме запуска углового приложения в приложении React).

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

Если это возможно, было бы очень полезно получить несколько примеров. Спасибо!

Answer 1

Если вы хотите поделиться данными (в памяти), вы всегда можете использовать переменную окна.

как

in App 1: window.someVar = "hello"
in App 2: console.log(window.someVar); 

для угловых вы можете обмануть транспортер TS, объявив окно сверху.

declare var window; 

OR

Если вы хотите общаться на основе событий, отправлять и прослушивать события

Событие отправки (приложение 1):

  let evt = new CustomEvent('InterAppData', { data: "hello" });
  window.dispatchEvent(evt);

Подписаться на событие (Приложение 2):

window.addEventListener('InterAppData', (e) => {
  if (e.data) {
    console.log(e.data); //--> prints "hello"
  }
});

PS: здесь приложение 1 и приложение 2 могут быть React и Angular или наоборот.