Angular 2 iframe for parent link

Question

in my current project, I have several Angular 2 applications that should be served by a portal application (also Angular 2). Thus, the portal application has a header area with links to all base applications. When the user clicks on one application link, the corresponding corner application is loaded into the frame of the portal body.

Now I am developing a central authorization service. On the portal I have a service that stores the rights of the current logged in user. My question is: is it possible to access the angular 2 services / components of the parent (portal) in separate applications (iframe)? It seemed that this was possible in angular 1 through the scope

Answer 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');

( 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');
  }
}

, iFrame , URL , . , :

[Userapp]/edituser/

:

Http:///// # edituser/

, ,

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

})
}

.

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

Answer 2

, , @jazza1000, .

, ( ) angular cli , JS allowJs. jsplumb ( js) -. ( )

, JS . angular 5 angular 4 iFrame. , , angular4 iframe, "" angular 4, , , / div iframe.

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 ( --port 4201)

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