angular 路由與模塊聯合

Question

我正在開發一個模塊聯合項目。

mfe1：ParentApp mfe2：childApp1 mfe3：childApp2 mfe4：childApp3（ChildApp1的父級）

childApp1 和 childApp3 和 childApp2 都有路由模塊，可以導航到不同的頁面。

我的問題是父應用程序如何知道 chdildApp3 更改了其路由並且 ParentApp 也需要更改其路由？

所有 childApp(s) 路由路徑都需要在 ParentApp webpack 配置中維護，還是有其他方法？

非常感謝任何建議。

謝謝

Answer 1

父應用怎么知道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
    }
  }

在子應用程序中：

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