Angular2 子路由停止页面加载

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 },
    ]
}

并在您的联系人组件模板中，添加 <router-outlet></router-outlet>

Angular2 子路由停止页面加载

Angular2 Child Routes stopping page loading

angular

angular2-routing