Navigate to child of lazy loaded module angular 8

Question

My app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'updateBooking', loadChildren: () => import('./update-booking/update-booking.module').then(m => m.UpdateBookingModule) },
  { path: 'booking', loadChildren: () => import('./booking/booking.module').then(m => m.BookingModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

lazy loaded Booking module's routing:

const routes: Routes = [
  { path: '', redirectTo: 'bookingdashboard' },
  {
    path: 'bookingdashboard', component: BookingDashboardComponent,
    children: [
      { path: '', redirectTo: 'associateinfo' },
      {
        path: 'associateinfo', component: AssociateInfoComponent
      },
      {
        path: 'agenda', component: AgendaComponent
      },
      {
        path: 'zone', component: ZoneComponent
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BookingRoutingModule { }

I am on associate info page with url http://localhost:4200/booking/bookingdashboard/associateinfo From this page when I try to navigate to agenda page using this._route.navigate(['../agenda' ]); I am getting error Cannot match any routes. URL Segment: 'agenda' Error: Cannot match any routes. URL Segment: 'agenda' Cannot match any routes. URL Segment: 'agenda' Error: Cannot match any routes. URL Segment: 'agenda'

However If I try to navigate from HTML file using [routerLink]="[ '../agenda']" its navigating to agenda page

Answer 1

尝试

this._route.navigate(['/booking/bookingdashboard/agenda']);

Answer 2

您仅导航到特定于组件的路由路径，您应该遵循路由作为 module-path/component-path

this._route.navigate(['booking/bookingdashboard/agenda' ]);

Answer 3

After the link parameters array, add an object with a relativeTo property set to the ActivatedRoute. The router then calculates the target URL based on the active route's location.

constructor(private _router: Router, private route: ActivatedRoute){}
this._router.navigate(['../agenda'], { relativeTo: this.route })