Skip to content

Instantly share code, notes, and snippets.

@TheMcMurder
Last active August 4, 2020 19:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TheMcMurder/b67e330063bd781d6a89a9c60d67fdc2 to your computer and use it in GitHub Desktop.
Save TheMcMurder/b67e330063bd781d6a89a9c60d67fdc2 to your computer and use it in GitHub Desktop.
Example of the post message set-up in Angular 9
import { Component } from '@angular/core';
import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(
private router: Router
) {}
ngOnInit() {
window.addEventListener('message', (message) => {
if (message.origin.includes('react')) {
const afterPeople = message.data.pathname
this.router.navigate([afterPeople])
}
})
this.router.events.subscribe(
(event: NavigationEvent) => {
if(event instanceof NavigationStart) {
window.parent.postMessage(
{pathname: event.url},
'https://react.microfrontends.app'
)
}
}
)
}
title = 'Tour of Heroes';
}
/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment