导航到懒惰组件,该组件将显示在名为辅助的插座中,可以看到它但主路由器插座将变空。
我需要分别显示两个路由器插座。
app.component.html:
<router-outlet name="aux"></router-outlet>
<router-outlet></router-outlet>
app.component.ts:
this.router.navigate(['/lazy', {outlets:{ aux:'lazyComponent'}}]);
应用程序模块:
const routes: Routes = [
{
path: '',
component: MainComponent
}
{
path: 'lazy',
loadChildren: './lazy.module#LazyModule'
}
]
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes)
],
bootstrap: [AppComponent]
})
export class AppModule { }
惰性模块:
const routes: Routes = [
{
path: 'lazyComponent',
component: 'lazyComponent',
outlet: aux //navigating here is making primary router outlet empty
}
]
@NgModule({
declarations: [lazyComponent],
imports: [ RouterModule.forChild(routes) ]
})
export class LazyModule{ }
尝试了其他路由器导航,例如:
this.router.navigate([ {outlets:{ primary: 'lazy, aux:'lazyComponent'}}]);
但是无法说未找到网址路由“ lazyComponent”。
我可以在惰性模块中以其他任何方式定义路由来实现此功能吗?