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

本文介绍了名称不正确的嵌套路由器插座的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

我的appponents.html

I have a <router-outlet> in my appponents.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 {}

现在在我的 desktopponent.html 中，我有另一个像这样的出口:

Now inside my desktopponent.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"