带有模块联合的角度路线

Question

我正在开发一个模块联合项目。

mfe1：家长应用程序 mfe2：childApp1 mfe3：childApp2 mfe4：childApp3（ChildApp1 的父级）

childApp1、childApp3 和 childApp2 都有路由模块，可以导航到不同的页面。

我的问题是父应用程序如何知道 chdildApp3 更改了其路由并且 ParentApp 也需要更改其路由？

所有 childApp 路由路径都需要在 ParentApp webpack 配置中维护，还是有其他方法？

如有任何建议，我们将不胜感激。

谢谢

Answer 1

父App如何知道chdildApp3改变了它的路由并且ParentApp也需要改变它的路由

一种方法是从您的子应用程序触发自定义事件并在您的父应用程序中注册该事件。

在家长

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
    }
  }

在子应用程序的主组件文件中（

app.component.ts

）：

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

Answer 2

即使我做了同样的事情，但路线没有更新，并且远程模块内的子组件也没有加载