Angular2嵌套路由不正确的URL

Question

我正在开发一个 Angular2 应用程序，我注意到子路由不会从它们的父路由扩展。这是设计的吗？

例如，如果我有一个路由配置如下的父路由器：

// In top-level component

router.config([
   new AsyncRoute({
       path: '/designer/:id',
       name: 'Designer',
       loader: () => 
           System.import('app/components/design.component')
                 .then(c => c['DesignComponent'])
   }),
   new AsyncRoute({
       path: '/planner/:id',
       name: 'Planner',
       loader: () => 
           System.import('app/components/plan.component')
                 .then(c => c['PlanComponent'])
   })
]);

在这些组件中定义的子路由器和路由如下：

// In child component, design.component for example

router.config([
   new AsyncRoute({
       path: '/model',
       name: 'Model',
       loader: () => 
           System.import('app/design/components/model.component')
                 .then(c => c['ModelComponent'])
   })
]);

例如，当加载顶级页面时，我们可能会到达http://localhost:5000/designer/10，但是当导航到子路由时，URL 最终会变为http://localhost:5000/model 而不是http://localhost:5000/designer/10/model。

预期：

http://localhost:5000/designer/10/model

实际：

http://localhost:5000/model

Answer 1

如果路由有子路由，则路径需要以/...结尾

new AsyncRoute({
       path: '/designer/:id/...',
       name: 'Designer',
       loader: () => 
           System.import('app/components/design.component')
                 .then(c => c['DesignComponent'])

这也可能是由异步路由引起的。只有加载子组件后才能解析完整的 URL。这在 Angular2 rc.0 中的新路由器中发生了变化