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

您需要在 bookingoverview 组件中添加：

<router-outlet></router-outlet>

Answer 2

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

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

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

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

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

Angular 子路由不工作

Angular child route not working

angular2-routing

angular