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，但是当导航到子路线时，网址最终为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中的新路由器中发生了变化

Angular2嵌套路由错误的URL

1 个答案: