名称不正确的嵌套路由器插座 [英] Nested Router Outlet With Name Not Working

问题描述

我正在为嵌套的路由器插座而苦苦挣扎.我的情况如下:

I'm struggling with nested router-outlets. My situations looks like this:

我的app.components.html

I have a <router-outlet> in my app.components.html

然后我通过URL:/d 懒加载我的 desktop.module.ts 模块.

Then I lazy load my desktop.module.ts module via the url: /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 中，我有另一个像这样的出口:

Now inside my desktop.component.html I have another outlet like this:

<路由器插座名称=桌面"></路由器插座>

在桌面组件内部，我也想使用桌面"插座路由到我的 WorkoutComponent .因此，使用url:/d/workout ，我将我的WorkoutComponent显示在DesktopComponent内.

And also inside the desktop component I want to route to my WorkoutComponent using the "desktop" outlet. So with the url: /d/workout I display my WorkoutComponent inside the DesktopComponent.

但是我似乎无法转到锻炼路线.我试过了:

But I can't seem to route to the workout route. I tried this:

[routerLink] ="/d/workout，出口:{" desktop}"

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

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

But neither are working and I can't find any working answers.

推荐答案

在desktop.module.ts中，您需要导出RouterModule

in desktop.module.ts you need to exports the RouterModule

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

，您应该像这样进行导航(尝试使用您的方式，如果仍然无法运行，请尝试以下操作):

and you should navigate like this (try ur way, if still not working try this):

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

这篇关于名称不正确的嵌套路由器插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！