Question

我是Angular2的新手，我正试图掌握路由，特别是子路由。

我已将我的应用程序基于Angular2-seed project，我正在尝试设置路由。我的路由封装在功能模块中，因为我希望我的应用程序有许多功能区域。为简洁起见，我省略了模块导入，可以假设它们在应用程序加载时是正确的。

app.component.ts

RouteConfig([
  { path: '/', component: HomeComponent, as: 'Home' },
  { path: '/area1/...', component: Area1Component, as: 'Area1' },
  { path: '/area2/...', component: Area2Component, as: 'Area2' },
])

area1.component.ts

@RouteConfig([
    { path: '/...', component: Area1Component, as: 'Area1' },
    { path: '/function1', component: Function1Component, as: 'Function1' },
])

area2.component.ts

@RouteConfig([
    { path: '/...', component: Area2Component, as: 'Area2' },
    { path: '/function2', component: Function2Component, as: 'Function2' },
])

我的导航定义如下

<nav>
    <a [routerLink]="['Home']">HOME</a>
    <a [routerLink]="['Area1', 'Function1']">A NICE FUNCTION</a>
    <a [routerLink]="['Area2', 'Function2']">ANOTHER NICE FUNCTION</a>
</nav>

如果我正常运行应用程序并导航菜单结构一切都很好，但是如果我刷新页面或允许浏览器同步在我在任何子路径中时执行相同操作，则托管应用程序的选项卡最多可以旋转100个％ CPU使用率。我无法弄清楚代码在哪里旋转，并且会理解我在设置路由时可能遗漏的任何指针。

Answer 1

as，而是使用名称。
/...向路由器指示有更多子路由。没有/...它们是终端路线。从您问题中的代码来看，似乎没有其他子路由，因此这些路由非常重要。

Answer 2

如果您想使用嵌套路线，可以使用children属性，如here所述：

{
    path: 'about',
    component: AboutComponent,
    children: [
        { path: '' },
        { path: 'contacts/:id',  component: ContactsComponent },
    ]
}

并在您的ContactsComponent模板中添加<router-outlet></router-outlet>

Angular2 Child Routes停止页面加载

2 个答案: