微前端中路由的跳转
针对基座与子应用都是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();}
标签:中路,基座,路由,应用,跳转,Router,前端,mainRouter
From: https://www.cnblogs.com/kongshu-612/p/17412343.html