Question

我正在为嵌套的路由器插座苦苦挣扎。我的情况如下：

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

然后我通过网址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，将我的WorkoutComponent显示在DesktopComponent内。

但是我似乎无法转到锻炼路线。我尝试过：

[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"

名称不正确的嵌套路由器插座

1 个答案: