Angular2子路由停止页面加载答案

【问题标题】：Angular2 Child Routes stopping page loadingAngular2子路由停止页面加载
【发布时间】：2016-07-25 21:24:10
【问题描述】：

我对 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使用率。我无法弄清楚代码在哪里旋转，如果我在设置路由时可能遗漏任何指针，我将不胜感激。

【问题讨论】：

as 已弃用，请改用name。 /... 路由的目的是什么？看起来您在问题中省略了更多子路线。我想这需要一个 Plunker 来重现？
@GünterZöchbauer 感到羞耻，我认为它比名称更具可读性。至于 /... 路由，我认为子路由需要它们，这是对阅读示例的误解。我已经删除了它们，现在路由工作正常。你能把你的评论作为答案，我会把它标记为答案

标签： angular angular2-routing

【解决方案1】：

as 已弃用，请改用名称。
路由路径末尾的/... 向路由器表明有更多子路由。没有/...，它们是终端路线。从您问题中的代码来看，似乎没有其他子路由，因此这些路由是冗余的。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：