Angular儿童路线不起作用

Question

我试图使路由和子路由工作在一个简单的配置,但我似乎无法使其工作.

路由:

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BookingoverviewComponent } from './bookingoverview/bookingoverview.component';
import { BookingDetailsComponent } from './booking-details/booking-details.component';

const appRoutes: Routes = [
    { path: 'bookingoverview', component: BookingoverviewComponent, 
    children: [
        { path: 'bookingDetails', component: BookingDetailsComponent }
    ]},
    { path: 'bookingDetails', component: BookingDetailsComponent },  
];

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

}

和链接:

  <a routerLink="/bookingoverview">Bookingoverview</a> 
  <a [routerLink]="['/bookingoverview', 'bookingDetails']">Details-component</a> 
  <a [routerLink]="['bookingDetails']">Details-component</a> 

localhost:4200/bookingoverview - 工作

localhost:4200/bookingDetails - 作品

localhost:4200/bookingoverview/bookingDetails - 不起作用!仅显示预订视图.

我究竟做错了什么？

谢谢!

Answer 1

确保您有两个路由器插座.

App Component需要a <router-outlet>来显示主要路线.

如果组件具有子路由,则该组件的模板也需要a <router-outlet>.然后,子路由将显示在该路由器插座中.

如果您想在同一台路由器插座中使用,请不要使用子路由:

const appRoutes: Routes = [
    { path: 'bookingoverview', component: BookingoverviewComponent, 
    { path: 'bookingoverview/bookingDetails', component: BookingDetailsComponent },
    { path: 'bookingDetails', component: BookingDetailsComponent },  
];