如何在Angular5中嵌套2层以上的子路由?
How to nest more than 2 levels of children routes in Angular 5?
我在 angular 中有这个示例路由 5. 3 个组件被导入到这个模块中。组件mark在john组件文件夹下生成,james组件在mark组件文件夹下生成
我想通过如下路径加载 james 组件:https://my-website/john-route/mark-route/james-route
所以我在模块文件中创建了这个路由。
const routes: Routes = [
{
path: 'john-route',
component: JohnComponent,
children: [
{
path: 'mark-route',
component: MarkComponent,
children: [
{
path: 'james-route',
component: JamesComponent
}
]
}
]
}
];
但我的问题是,它只加载到带有此 [routerLink]="['mark-route']"
的标记组件。
在带有此 [routerLink]="['james-route']"
的 james 组件上,它仅在 URI
中显示正确的路径 https://my-website/john-route/mark-route/james-route
但不会在页面中加载该组件。这里发生了什么,如何解决这个问题或者最好的解决方案是什么?
你的 MarkComponent
里面也需要有一个 router-outlet
。
要使用子路由,您的父组件必须有标记部分
<router-outlet></router-outlet>
这可以让您的子路由放置在父组件中。必须对具有子组件的所有组件执行相同的操作。
有关更多信息,请参阅 Routing & Navigation in Angular
我在 angular 中有这个示例路由 5. 3 个组件被导入到这个模块中。组件mark在john组件文件夹下生成,james组件在mark组件文件夹下生成
我想通过如下路径加载 james 组件:https://my-website/john-route/mark-route/james-route
所以我在模块文件中创建了这个路由。
const routes: Routes = [
{
path: 'john-route',
component: JohnComponent,
children: [
{
path: 'mark-route',
component: MarkComponent,
children: [
{
path: 'james-route',
component: JamesComponent
}
]
}
]
}
];
但我的问题是,它只加载到带有此 [routerLink]="['mark-route']"
的标记组件。
在带有此 [routerLink]="['james-route']"
的 james 组件上,它仅在 URI
中显示正确的路径 https://my-website/john-route/mark-route/james-route
但不会在页面中加载该组件。这里发生了什么,如何解决这个问题或者最好的解决方案是什么?
你的 MarkComponent
里面也需要有一个 router-outlet
。
要使用子路由,您的父组件必须有标记部分
<router-outlet></router-outlet>
这可以让您的子路由放置在父组件中。必须对具有子组件的所有组件执行相同的操作。
有关更多信息,请参阅 Routing & Navigation in Angular