时间戳

首页 > 解决方案 > 如何在angularjs和angular（2-7）应用程序之间共享数据或事件

angularjs - 如何在angularjs和angular（2-7）应用程序之间共享数据或事件

问题描述

我在 angularjs 中有父应用程序，在内部视图中我正在使用 iframe 并在 iframe 中加载子应用程序（角度（2-7））。我想在 angularjs 中从 angular (2-7) 捕获事件或数据。如果使用 angularjs 看如何使用它。请参考一些尝试捕获 iframe 属性的最佳实践，但在 angular2 中无法访问它并获取父级 null。

那么 window.postMessage 呢

标签： angularjsangulariframe

解决方案

我使用该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...

重要说明： using@HostListener('window:message'将保留$scope组件，因此您可以像正常使用它一样自由使用this它，而不是使用类似ngZone或.bind(this), false

推荐阅读