微前端中路由的跳转

微前端中路由的跳转

针对基座与子应用都是Angular 的场景，实现应用间的路由跳转

基座往子应用的跳转

• 首先在路由中要定义一个空组件来承接子路由，可以在基座路由表中添加如下路由

{
    path: 'subapp', children: [
      { path: '**', component: EmptyComponent }
    ]
}

@Component({
  selector: 'Empty-Component',
  template: '',
})
export class EmptyComponent { }

子应用跳回基座或者其他子应用

• 由于我们在改写了子应用的APP_BASE_HREF,所以，我们无法调到subapp的上一层，Angular 路由系统如果是LocationStrategy,实际是可以做到的。如果是useHash的模式，是做不到的

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
  providers: [{ provide: APP_BASE_HREF, useValue: '/subapp' }]
})
export class AppRoutingModule { }

• 如何解决这个问题？
  • 使用window.location.href=mainapp,这个方式会导致页面重载，状态丢失。会有白屏，也就失去了微前端的意义。不推荐
  • 如果我们的路由采用的是路由系统如果是LocationStrategy,也就是路由长这样http://hostname:port/path1/subpath,我们可以通过采用window.history.pushState(stateObj,'',relativeURL)的方式来解决。页面不会发生重载
  • 我们可以将主应用的路由传递给子应用。这样子应用直接用这个路由来跳转。爽歪歪。做法如下
    • 主应用组测微应用的组件里面，一般是app.component.将Router作为属性传递给子应用。

constructor(private router:Router){}
registerMicroApps(microApps.map(it => ({ ...it, props: { mainRouter: this.router } })),{beforeLoad,beforeMount,afterMount,afterUnmount})

- 在子应用的main.ts 中，在**bootstrapFunction**中拿到这个**mainRouter**,将这个插入到Angular 的DI中。

const mainRouteToken = new InjectionToken<Router>('mainRouter');
bootstrapFunction(singspaProps){
  const mainRouter = (singspaProps as any)['mainRouter'];
  return platformBrowserDynamic([{ provide: mainRouteToken, useValue: mainRouter }]).bootstrapModule(AppModule);
}

- 然后在我们的子应用中注入这个router

  constructor(@Inject(mainRouteToken) private mainRouter: Router,){}
  gohome(){this.mainRouter.navigate();}