Angular 2 iframe与父通信 [英] Angular 2 iframe to parent communication

问题描述

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

in my current project I have multiple Angular 2 applications which should be served by a portal application (also Angular 2). So the portal app has a header area with links to all underlying apps. When the user clicks on one app link, the corresponding angular 2 app gets loaded in an iframe of the portal body.

现在我开发了一个中央授权服务。在门户网站中，我有一个服务，它拥有当前登录用户的权限。我的问题是：是否可以在单个应用程序（iframe）中访问父（门户）的角度2服务/组件？这似乎是有可能的角度1 通过范围

Now I develop a central authorization service. In the portal I have a service which holds the permissions of the current logged-in user. My question is: Is it possible to access angular 2 services / components of the parent (portal) within the individual apps (iframe)? It seemed to be possbile in angular 1 via scope

推荐答案

我正在寻找类似的东西（一个带有子应用程序的门户应用程序） iFrame）
您可以使用 window.postMessage 发送数据，在服务器和客户端之间进行通信（向任一方向）。

I am looking at doing something similar at the moment (a portal application with sub apps in an iFrame) You can communicate between your server and client (in either direction) by using window.postMessage to send data.

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

So for example on the server app:

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

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

和客户端应用程序（在iFrame中托管）

and on the client app (hosted within the iFrame)

export class AppComponent {

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

在父级中显示子框架路径
因此，在我的实现中，我们将shell应用程序中的标记和用户信息传递给子iFrame，然后我们将子应用程序的路由信息​​传递回shell，以便url反映在儿童申请。
在儿童申请中，您可能有以下路线：

Showing child frame routes in the parent So, in my implementation we pass tokens and user information from the shell application to the child iFrame, and we pass routing information from the child applications back to the shell so that the url reflects the route selected in the child application. In a child application you may have a route such as:

[userapp] / edituser / username

[userapp]/edituser/username

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

, and we wish to post it to the parent application and display the route like:

http：// mywebsite / main / application / user＃edituser / bob

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

Note that we use hashtag to mark a child route, and in your child applications you intercept every navigation event and post the new route via

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},'*')
  }

})
}

然后在父应用程序中解析消息并使用它来更新显示的位置路径。

and then in the parent application parse the message and use it to update the location path displayed.

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

这篇关于Angular 2 iframe与父通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！