Angular2子路由停止页面加载

我对Angular2还比较陌生，正在努力掌握路由，尤其是子路由

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

app.component.ts

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

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

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

区域1.1.ts

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

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

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

区域2.1.ts

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

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

@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>

家
一个很好的函数
另一个不错的功能

如果我正常运行应用程序并浏览菜单结构，一切都很好，但是如果我在任何子路由内刷新页面或允许浏览器同步，则承载应用程序的选项卡的cpu使用率将达到100%。我无法确定代码在哪里旋转，如果在设置路由时遗漏了任何指针，我将不胜感激。

---

• 由于不推荐使用

  ，请改用name

• 路由路径末尾的

  /…

  向路由器指示有更多的子路由。如果没有

  /…

  ，它们是终端路线。从您问题中的代码来看，似乎没有其他子路由，因此这些路由是rendundant

---

如果要使用嵌套路由，可以使用

子属性，如下所述：

在您的联系人组件模板中，添加
，因为
已被弃用，请使用
名称
。
/…
路线的目的是什么？看起来您在问题中遗漏了更多的子路径。我想这需要一个Plunker来复制？@GünterZöchbauer对as感到羞耻，我认为它比名字更易读。至于/。。。路线我认为他们在哪里需要孩子路线，一个误读的例子。我已经移除了它们，现在路由工作得很好。你能把你的评论作为答案吗？我会把它标记为答案