Kommunikation zwischen eckigen 2 und reinem Javascript

Question

Ich baue eine eckige Anwendung und ich bin in einer Situation, wo ich mit einem externen Javascript kommunizieren muss.

Scenario Während app Initialisierung i injizieren zwei iframes in index.html Verwendung

document.body.appendChild(iframe); 

Ich habe Skript in index.html ausgeführt und hat eine Vielzahl von Funktionen unter denen eine getData(); Ich muss Daten an diese Funktion von der eckigen App-Komponente senden, wenn die App initialisiert. Wie geht das? Ich weiß, wie man von Javascript zu angular kommuniziert, aber nicht umgekehrt. Bitte hilf mir. Ich bin getroffen.

Answer 1

Die grundlegende Kommunikation kann über Rückrufe erfolgen.

Ein Rückruf kann entweder durch angulare oder nicht-eckige Anwendung definiert werden. abhängig von der Richtung der Kommunikation.

@Injectable() 
class GlobalService { 
    constructor() { 
    window.vanillaToAngularCallback = data => { 
     // communicate with other Angular providers 
    } 
    } 
} 

und/oder

window.angularToVanillaCallback = data => { 
    // communicate with other vanilla JS code 
} 

Wo angularToVanillaCallback soll innerhalb Angular genannt werden, und vanillaToAngularCallback außerhalb Angular genannt. Die Zeit der ersten Callback-Anrufe sollte korrekt gewählt werden; Callbacks sollten nicht von einer Seite aufgerufen werden, bis sie von einer anderen Seite definiert werden.

Es ist immer noch vorzuziehen, nicht-eckigen Teil als ein Webpack-Paket zu halten. Auf diese Weise kann der Verweis auf window vermieden werden, und gemeinsame Klassen können für die Kommunikation mit dem eckigen Teil verwendet werden, entweder über Rückrufe oder RxJS-Subjekte.