3

问题：我有一个惰性模块想要在我的 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>
4

0 回答 0