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

Question

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

让我们看一下显示3种水果的列表的组件。每个水果都有专门的成分。列表URL是localhost：4200 / fruit-list。我希望能够导航到localhost：4200 / fruit-list / banana并显示香蕉组件，但仅此组件，而不是像子路由那样代替列表组件中的“ router-outlet”。

一个简单的解决方案是分别声明“水果清单”，“水果清单/香蕉”，“水果清单/苹果” ...路线，但我认为这并不是很优雅。没有一种方法可以简单地使水果路线成为列表路线的子路线，而只是在尝试转到子路线时仅显示水果路线，而不是在列表路线的内部显示它。

Answer 1

这是可能的。像这样：

[

  { path: 'fruit-list/:fruit, component: FruitComponent },
  { path: 'fruit-list', component: FruitListComponent }
]

或者也许我不明白您的问题。 “成为列表路由的子代”是什么意思？