angular - 在 Angular 中创建“子/嵌套”路由的更好方法？

Question

我的问题似乎微不足道，但我真的不知道在哪里可以在线找到答案..

让我们使用一个显示 3 种水果列表的组件。每个水果都有一个专用组件。列表 URL 是 localhost:4200/fruit-list。我希望能够导航到 localhost:4200/fruit-list/banana 并显示香蕉组件，但只有这个组件，而不是像子路由那样代替列表组件中的“路由器插座”。

一个简单的解决方案是单独声明 'fruit-list'、'fruit-list/banana'、'fruit-list/apple'... 路线，但我觉得这并不优雅。没有办法简单地使水果路由成为列表路由的子路由，而是在尝试转到子路由时简单地显示水果组件，而不是在列表组件的内部显示它。

标签： angularrouting

Answer 1

这可以通过无组件路由实现。像这样：

export const routes = [
  { path: 'fruit-list', children: [
    { path: '', component: ListComponent },
    { path: 'banana', component: BananaComponent },
    { path: 'apple', component: AppleComponent }
  ]}
];

堆