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，则网址必须为 B /（B1 // nav：BNav）

要通过代码导航：

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

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

1 个答案: