typescript - 我如何在 Angular 中让一个懒加载模块访问命名的出口?
问题:我有一个懒加载模块,它想在我的 app.component.html 中使用弹出路由器。
我在应用组件模板中有如下内容:
src/app/app.component.html
<!-- Primary Router -->
<router-outlet id="main-router"></router-outlet>
<!-- Popup Router -->
<router-outlet name="app-popup"></router-outlet> <!-- <--------- -->
我的应用模块及其路由:
/src/app/app-routing.module.ts
const appRoutes: Routes = [
{ path: 'lazy', loadChildren: 'app/lazy/lazy.module#LazyModule' }, // <--------
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(appRoutes),
],
exports: [
RouterModule
],
})
export class AppRoutingModule { }
/src/app/app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
我的懒加载模块及其路由:
/src/app/lazy/lazy.module.ts
const lazyRoutes: Routes = [
{ path: 'lazy-popup', outlet: 'app-popup', component: LazyPopupComponent },
{ path: '', component: LazyComponent }
];
@NgModule({
imports: [
RouterModule.forChild(lazyRoutes)
],
exports: [
RouterModule
]
})
export class LazyRoutingModule {}
/src/app/lazy/lazy.module.ts
@NgModule({
imports: [
CommonModule,
AppSharedModule,
LazyRoutingModule
],
declarations: [
LazyComponent,
LazyPopupComponent
],
exports: [
LazyPopupComponent,
LazyRoutingModule,
]
})
export class LazyModule {}
我似乎无法让它工作,因为我收到了这个错误:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot match
any routes. URL Segment: 'lazy-popup'.
请注意,如果我在下面的 AppModule 中导入 LazyModule,这个方法会完美运行:
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
LazyModule // <-- This routes works now.. But.. this should be lazy.. : (
],
bootstrap: [AppComponent]
})
export class AppModule {}
虽然这违背了它作为懒加载模块的初衷。那么我如何让懒加载模块使用存在于应用组件 HTML 模板中的名为 'app-popup' 的次级路由出口呢?
更新:
我像这样导航到路线:
/src/app/lazy/lazy.component.html
<button [routerLink]=" [ '', { outlets: { 'app-popup': ['lazy-popup'] } }] "></button>