Nested Router Outlet With Name Not Working

问题

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

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

Then I lazy load my desktop.module.ts module via the url: /d.

It looks like this:

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 {}

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

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

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, outlet: { "desktop" }"

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

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

回答1:

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"

来源：https://stackoverflow.com/questions/52824639/nested-router-outlet-with-name-not-working

标签

angular

angular2-routing