如何在应用程序组件中定义的辅助路由器出口中显示来自延迟加载的模块的组件

Question

我有一个延迟加载的功能模块（B），该模块具有一个导航组件，该组件应显示在根应用程序组件中定义的命名路由器出口中。

当模块延迟加载时，我无法使其正常工作。 我在非延迟加载模块（A）中没有问题

示例应用程序： https : //stackblitz.com/edit/angular-nav-sample-lazy

根路由：

const appRoutes: Routes = [
    { path: '',  redirectTo: '/A1(nav:A-Nav1)', pathMatch: 'full' },
    { path: 'A', redirectTo: '/A1(nav:A-Nav1)', pathMatch: 'full' },
    { path: 'B', loadChildren: './feature-b/b.module#BModule' },
    { path: '**', component: PageNotFoundComponent }
];

A模块路线：

const routes: Routes = [
    { path: 'A1', component: A1Component },
    { path: 'A2', component: A2Component },
    { path: 'A3', component: A3Component },
    { path: 'A-Nav1', component: ANav1Component, outlet: 'nav' },
    { path: 'A-Nav2', component: ANav2Component, outlet: 'nav' }
];

B模块路线：

const routes: Routes = [
    { path: 'B-Nav', component: BNavComponent, outlet: 'nav' },
    { path: 'B1', component: B1Component },
    { path: 'B2', component: B2Component },
    { path: 'B3', component: B3Component },
    { path: '', pathMatch: 'full', redirectTo: '/B/B1' },
];

app.component.html

<div id="container">
<ul>
    <!-- works fine -->
    <li [routerLink]="['/A']">A</li>

    <!-- doesn't work -->

    <li [routerLink]="['/B']">B</li>
    <li [routerLink]="[{ outlets: { primary: ['/B/B1'], nav: ['B-Nav'] } }]">B</li>
    <li [routerLink]="[{ outlets: { primary: ['B', 'B1'], nav: ['B-Nav'] } }]">B</li>
    <li [routerLink]="[{ outlets: { primary: ['B'], nav: 'B-Nav' } }]">B Nav</div>
</ul>

    <router-outlet name="nav"></router-outlet>

    <router-outlet></router-outlet>
</div>

Answer 1

要在主要路由器出口中显示B1Component并在命名路由器出口中显示BNavComponent，URL必须为B /（B1 // nav：BNav）

要通过代码导航：

this._router.navigate(['/B', {outlets: { primary: ['B2'], nav: ['BNav'] }}]);