Angular2 路由，父子节点——路由组件 vs 视图组件

Question

我正在开发一个Angular2应用程序，目前我们处于 beta-17，因为候选版本不再支持捆绑并破坏了一切（那是另一个故事）。

我理解父子路由之间的关系应该是子路由如果想要路由就必须是“路由组件”。 这是有道理的，对 - 但是如果我想要一个父“路由组件”，它有一个子“视图组件”，它充当子“路由组件”的父级？

.
├── app.component // Has two child routes, both are "view components"
     ├── plan.component
     └── design.component // View component, route "/design/:id/..."
         ├── header.component
         ├── nav-and-body.component // Routing component
         └── footer.component

我有一个顶级应用程序，它有两条路线， /plan/:id/...和/design/:id/...路线。 如您所见，我希望这些将作为其他“路由组件”的父级。 想象一下，我们在“设计”路线中，我们尝试导航到NavAndBodyComponent定义的子路线，但它不起作用，也不会抛出错误。

我相信这是因为我有一个父“路由组件”，它有一个子“视图组件”，它有一个嵌套的“路由组件”——我怎样才能在不改变这个层次结构的情况下解决这个问题？

视图组件按预期加载：

网址： localhost:5000/design/10

但是当我尝试导航到嵌套的子路由时，URL 更改为

网址： localhost:5000/model

我想要（和预期）：

网址： localhost:5000/design/10/model

更新

这是一个非常详细的Plunker ！

Answer 1

该问题是由在根组件以外的组件上添加ROUTER_PROVIDERS引起的。

Plunker 示例

如何防止每次激活路由时添加动态添加的路由，请参见Angular2：配置“名称”与现有路由“名称”冲突