导航到延迟加载模块 angular 8 的子项

Question

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

延迟加载的 Booking 模块的路由：

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

我在关联信息页面上使用 url http://localhost:4200/booking/bookingdashboard/associateinfo当我尝试使用this._route.navigate(['../agenda' ]);导航到agenda页面时， this._route.navigate(['../agenda' ]);页面上this._route.navigate(['../agenda' ]); 我收到错误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'

但是，如果我尝试使用[routerLink]="[ '../agenda']"从 HTML 文件导航到议程页面

Answer 1

尝试

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

Answer 2

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

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

Answer 3

在链接参数数组之后，添加一个将 relativeTo 属性设置为 ActivatedRoute 的对象。 然后路由器根据活动路由的位置计算目标 URL。

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