Как обмениваться данными или событиями между angularjs и angular (2-7) приложениями

Question

У меня есть родительское приложение в angularjs, изнутри я использую iframe и загружаю дочернее приложение (angular (2-7)) в iframe.Я хочу захватить событие или данные из angularjs (2-7).если использовать angularjs, то смотрите, как его использовать.Пожалуйста, ознакомьтесь с рекомендациями по получению атрибута iframe, но он недоступен в angular2, и получите родительский ноль.

как насчет window.postMessage

Answer 1

Я добился этого с помощью функции postMessage.Примерно так:

<iframe id="yourId" frameborder="0" [src]="contentUrl"></iframe>

в файле .ts:

public sendEvent(res){

      this.iFrame = document.getElementById('yourId');
      var iWindow = (<HTMLIFrameElement>this.iFrame).contentWindow;

      iWindow.postMessage({
        'func': 'test',
        'obj': ...yourData...
      }, "*");
    }

приложение, которое будет ловить это событие, имеет этот код в app.component:

@HostListener('window:message', ['$event']) yourFunction(data: any) {
  // your logic here
}

в data у вас будут следующие значения:

'func': 'test',
'obj': ...yourData...

Важное примечание : использование @HostListener('window:message' сохранит $scopeк компоненту, так что вы можете свободно использовать this, как вы будете использовать его обычно вместо того, чтобы использовать что-то вроде ngZone или .bind(this), false