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

确保您有两个路由器 socket 。

App 组件需要 <router-outlet>显示主要路线。

如果一个组件有子路由，该组件的模板也需要一个 <router-outlet> .然后子路由显示在该路由器导出内。

如果你想在同一个路由器导出，不要使用子路由:

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