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需要<router-outlet>来显示主要路线。

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

如果您想在相同的路由器插座中使用，请不要使用子路由：

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

Answer 2

您需要添加预订视图组件：

<router-outlet></router-outlet>

Angular儿童路线不起作用

2 个答案: