Javascript 角度2帧到父级通信

在我当前的项目中，我有多个Angular 2应用程序，它们应该由一个门户应用程序（也是Angular 2）提供服务。因此门户应用程序有一个标题区域，其中包含指向所有底层应用程序的链接。当用户单击一个应用程序链接时，相应的angular 2应用程序将加载到门户主体的iframe中

---

现在我开发了一个中央授权服务。在门户中，我有一个服务，它拥有当前登录用户的权限。我的问题是：是否可以在单个应用程序（iframe）中访问父级（门户）的angular 2服务/组件？在angular 1中这似乎是可能的，我目前正在考虑做类似的事情（iFrame中包含子应用程序的门户应用程序） 通过使用window.postMessage发送数据，您可以在服务器和客户端之间（在任意方向）进行通信

例如，在服务器应用程序上：

var iframe = document.getElementById('useriframe');
    if (iframe == null) return;
    var iWindow = (<HTMLIFrameElement>iframe).contentWindow;

    iWindow.postMessage({"for":"user","data":"anything"}, 'http://localhost:4001');

在父帧中显示子帧路由 因此，在我的实现中，我们将令牌和用户信息从shell应用程序传递到子iFrame，并将路由信息从子应用程序传递回shell，以便url反映子应用程序中选择的路由。 在子应用程序中，您可能有一个路由，例如：

[userapp]/edituser/username

，我们希望将其发布到父应用程序并显示如下路径：

请注意，我们使用hashtag标记子路由，在您的子应用程序中，您可以拦截每个导航事件，并通过

export class MyRoutingComponent implements OnInit {
constructor(private router: Router) { 
router.events.subscribe((event: Event)=>{
  if (event instanceof NavigationEnd){
        let url=(<NavigationEnd>event).url;
        if (url.length>1)//don't post message about base route '/'
          window.parent.postMessage({"for":"dashboard", "operation":"changeroute","route":url},'*')
  }

})
}

---

您好，非常感谢@jazza1000提供的解决方案，它帮助了我

我们的问题是在当前（到目前为止）版本的angular cli中，存在一个阻止使用外部JS文件的漏洞，即使使用allowJs也是如此。我们将使用jsplumb（外部js）来表示一些流程图。（）

因此，我们决定采用在附加的angular 4应用程序中托管使用外部JS的功能的方法。父angular 5应用程序将引入带有iFrame的angular 4应用程序。因此，当用户想要查看流程图时，我们将在iframe中打开angular4应用程序，然后在angular4应用程序中单击save（保存），保存所有修改，然后将消息发送到父窗口，该窗口将关闭/隐藏带有iframe的div

angular 5中的父应用程序具有以下代码

 @HostListener('window:message', ['$event'])
  onMessage(e) {
    debugger;
    if (e.origin != "http://localhost:4201") { // set your origin
      return false;
    }
    if (e.data.for == "user") {
      alert('here i am');
    }
  }

我们的iFrame angular 4应用程序on save按钮具有以下代码（我们使用--port 4201启动应用程序）

    url = url +'#' + route;            
    this.location.go(url);

 @HostListener('window:message', ['$event'])
  onMessage(e) {
    debugger;
    if (e.origin != "http://localhost:4201") { // set your origin
      return false;
    }
    if (e.data.for == "user") {
      alert('here i am');
    }
  }

window.parent.window.postMessage({"for":"user","data":"anything"}, 'http://localhost:4200')