名称不工作的嵌套路由器插座

Question

我正在为嵌套的路由器插座苦苦挣扎。我的情况是这样的：

我的 app.components.html 中有一个 <router-outlet>

然后我通过 url 延迟加载我的 desktop.module.ts 模块：/d。

看起来像这样：

const routes: Routes = [
    { path: 'workout', component: WorkoutComponent, outlet: 'desktop'},
    { path: '', component: DesktopComponent, pathMatch: 'full' }
];


@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        RouterModule.forChild(routes)
    ],
    declarations: [WorkoutComponent, DesktopComponent],
})
export class DesktopModule {}

现在在我的desktop.component.html 里面我有另一个这样的出口：

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

在桌面组件内部，我想使用“桌面”插座路由到我的WorkoutComponent。所以使用 url：/d/workout 我在 DesktopComponent 中显示我的 WorkoutComponent。

但我似乎无法前往锻炼路线。我试过这个：

[routerLink]="/d/workout, outlet: { "desktop" }"

routerLink="/d/(desktop:workout)"

但两者都不起作用，我找不到任何有效的答案。

Answer 1

在 desktop.module.ts 中你需要导出 RouterModule

@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        RouterModule.forChild(routes)
    ],
    declarations: [WorkoutComponent, DesktopComponent],
    exports: [RouterModule]
})

你应该像这样导航（试试你的方法，如果仍然不工作试试这个）：

[routerLink]="['/d/workout']"
routerLink="/d/workout"