Angular 4在视图交换时重新加载整个应用程序答案

【问题标题】：Angular 4 reloading entire application on view swapAngular 4在视图交换时重新加载整个应用程序
【发布时间】：2017-10-09 16:48:40
【问题描述】：

但是，当做一个测试组件并以与 AppComponent 中的 Nav 组件相同的方式使用它时，测试被渲染了 2 次。不知道为什么。无论如何，问题在于整个应用程序似乎正在重新加载或刷新正在单击的导航菜单项。它应该只是交换视图，但事实并非如此。无论如何，这里是我的应用程序的回购：

我不确定问题出在模块、app.component 还是路由中。谢谢

【问题讨论】：

在您的导航组件中尝试将您的 routerLinks 转换为 [routerLink]="['/route']"
@LLai 我刚刚尝试过，似乎并没有改变问题。 routerLink 仍在关闭菜单并交换视图
点击导航项目时是否出现错误？您的所有路由是否都在 app-routing.module.ts 中定义？
@LLai 当前构建的唯一组件是“解锁”组件。 routing.module.ts 为路由定义如下：{ path: 'unlock', component: UnlockComponent } 希望对您有所帮助
我的猜测是，当您单击导航项并尝试转到未定义的路线时，应用程序会抛出错误。这导致了您所看到的行为。也许尝试使用一些测试/虚拟组件添加一些额外的路线。然后查看定义的路由之间的路由是否按预期工作

【解决方案1】：

答案是切换列表必须在父元素之外。问题是通过单击父级重新触发切换的子菜单项。

【讨论】：