Как отобразить компонент из лениво загруженного модуля во вторичном маршрутизаторе, определенном в компоненте приложения

Question

У меня есть ленивый загруженный функциональный модуль (B), в котором есть nav-компонент, который должен отображаться в именованном маршрутизаторе, определенном в корневом компоненте приложения.

Я не могу заставить его работать, когда модуль загружен лениво. У меня нет проблем с загруженным модулем (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'] }}]);