I am working on a module federation project.
mfe1: ParentApp mfe2: childApp1 mfe3: childApp2 mfe4: childApp3(parent of ChildApp1)
childApp1 and childApp3 and childApp2 all have routing modules which will navigate to different pages.
My question is how does the parent app know that chdildApp3 changed its routing and ParentApp also needs to change its route?
All the childApp(s) routing path need to be maintained in ParentApp webpack config or there is an alternative way?
Any suggestion is greatly appreciated.
Thanks
how does the parent app know that chdildApp3 changed its routing and ParentApp also needs to change its route
One way would be to fire a custom event from your child app & register to that event in your parent app.
In parent app.component.ts
:
@HostListener('window:childRoutechanged',['$event'])
onChildRouteChange(event)
{
if(event && event.detail)
{
this.location.go(event.detail.microApp+event.detail.route); //Update the url path and also add it to browser's history without actually invoking router
}
}
In child app:
this.router.events.pipe(
filter(event=>
{
return event instanceof NavigationEnd;
})
).subscribe((event:NavigationEnd)=>
{
// create custom event in your micro app. & dispatch it whenever
your route changes & you want parent to listen to it
const routeChangeEv = new CustomEvent('childRoutechanged', {
detail: {
microApp: 'child3',
route:'my/custom/route'
}
});
window.dispatchEvent(routeChangeEv);
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.