导航到延迟加载模块角度 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 { }

延迟加载预订模块的路由：

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

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

试试

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

Answer 3

在链接参数数组之后，添加一个具有 relativeTo 的对象 属性设置为激活的路由。然后，路由器计算 基于活动路由位置的目标 URL。

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