Global Callback von Angular App

Question

Dank einer laufenden Integration versuche ich derzeit, 2 JS-Anwendungen auf der gleichen Seite (eine in Angular 2, andere in React) zu laufen, um miteinander zu kommunizieren. Momentan findet die gesamte Datenfreigabe zwischen den beiden unter Verwendung eines Objekts im Fensterumfang der Seite statt (nicht ideal, aber geradlinig), und da die Daten nicht kritisch sind, wird es funktionieren. Dies ist, was das wie

<script> 
window.sharedStuff = {oscar_winner: "LALALAND", news: "FAKE"} 
</script> 

// The angular 2 Application 
<my-app> 
</my-app> 

// React App 
<div class="react-app"> 
</div> 

sieht auch immer, ich habe Problem Rückrufe von dem Winkel Anwendung der Einrichtung, die die Anwendung hören reagieren und eine Aktion auf ausführen. Grundsätzlich, wenn ein bestimmtes Ereignis in einer Angular-Komponente auftritt, möchte ich die React-Anwendung informieren, dass es aufgetreten ist. Wie kann ich das machen? Ich habe Zugriff auf den Fensterbereich sowohl von Angular und reagieren, also idealerweise möchte ich die window.sharedStuff selbst verwenden, um einen Rückruf zu definieren, an den die reagierende Anwendung binden kann. Aber ich kann keine Dokumentation darüber finden, wie ich das anstellen könnte (Vielleicht, weil dies eine einzigartige/seltsame Situation ist).

Wie würde ich darüber gehen? Hilfe sehr geschätzt!

Answer 1

Für einfache Fälle wie deins können Sie immer Mediator oder eine Implementierung von Observable Muster erstellen. Zum Beispiel schnelle und einfachste könnte man sieht wie folgt aus:

window.observer = { 
    listeners: {}, 

    subscribe (event, callback) { 
    this.listeners[event] = this.listeners[event] || [] 
    this.listeners[event].push(callback) 
    }, 

    broadcast (event, data) { 
    if (Array.isArray(this.listeners[event])) { 
     this.listeners[event].forEach(callback => callback(data)) 
    } 
    } 
} 

Und es könnte durch Angular 2 App verwendet werden, um Daten zu schieben mit broadcast Methode. Reagieren App auf anderer Seite auf die gleichen window.observer abonnieren könnte und legen Sie es Zustand:

window.observer.subscribe('name.selected', name => { 
    this.setState({ name }) 
}) 

überprüfen Sie die einfache Demo mit kantigen 2 und reagieren Anwendungen wie gute Freunde im Gespräch: http://plnkr.co/edit/NT1eGQUvoKSAnH9ZwgeB?p=preview

Answer 2

Warum fügen Sie dem Fensterobjekt keinen Ereignis-Listener hinzu und lässt Ihre React App das Ereignis auslösen, das von Angular und umgekehrt empfangen wird?

window.addEventListener('click', function() { alert('hello world') });