如何在angularjs和角(2-7)应用程序之间共享数据或事件

Question

我有父应用程序在angularjs，内部视图我使用iframe和加载子应用程序(角(2-7))在iframe。我想从角度(2-7)的角度捕捉一个事件或数据。如果使用天使，注意如何使用它。请参考一些尝试捕获iframe属性的最佳实践，但是它在angular2中是不可访问的，并且获取父null。

那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，就像通常使用this一样，而不是使用ngZone或.bind(this), false之类的东西。

Answer 2

另一种方法可以是使用JSChannel！

JSChannel支持：

• 查询/响应
• 传统rpc查询/更新/响应
• 将结果增量异步返回到查询通知
• 火与忘
• 错误处理