【问题标题】：router.navigateByUrl() causes navigation to root and reload, angular 2.4.7router.navigateByUrl() 导致导航到 root 并重新加载，角度 2.4.7
【发布时间】：2017-02-14 20:51:25
【问题描述】：

navigateByUrl 导致导航到根目录并重新加载

当我使用 router.navigate() 或 navigateByUrl() 时，我会重新加载 - a 调用根。 Chrome 开发工具控制台显示 Navigated to http://localhost/

通过链接导航 <a [routerLink]= 工作正常。

应用程序

是使用 angular-cli 生成的。组件是生成然后修改的。
有 3 个组件 test1、test11（test1 的子级）和 test2
通过锚标记链接在 test11 和 test2 之间导航可以正常工作 [routerLink]（声明性）
使用 (click) 事件从 test2 导航到 test11 和程序化（命令式）导航调用 this.router.navigateByUrl('/test1/test11');

环境

angular-cli: 1.0.0-beta.28.3 node: 7.5.0 os: win32 x64 @angular/common: 2.4.7 @angular/compiler: 2.4.7 @angular/core: 2.4.7 @angular/forms: 2.4.7 @angular/http: 2.4.7 @angular/platform-browser: 2.4.7 @angular/platform-browser-dynamic: 2.4.7 @angular/router: 3.4.7 @angular/compiler-cli: 2.4.7

代码

已发布到 GitHub，published to GitHub https://github.com/michaelkariv/angular_router_demo

由 ng serve 使用生产环境提供服务

serve --host localhost --port 80 --live-reload false -prod

我做错了什么？

【问题讨论】：

对于所有的观众，这里是更新。到目前为止，angular 已经升级到第 4 版。所以可能（我没有检查）问题就消失了。我不知道。我搁置了这个项目。现在我重新打开它。我决定从 angular 2 和 up + bootstrap 转向 ionic 2 框架。 Ionic 框架模仿移动导航并将路由器包装在自己的实现中。这种实现更容易处理。无论如何，我一直在尝试制作移动应用程序的网络版本 - 所以 ionic 是最自然的方式。所以我需要这个问题现在没有实际意义。

标签： angular angular2-routing angular-cli

【解决方案1】：

根据您的代码，点击锚点时会触发浏览器的默认导航

<a href="" (click)="goToTest11()"> router.navigateByUrl('../test1/test11')</a>

使用 event.preventDefault() 修复该问题

<a href="" (click)="$event.preventDefault();goToTest11();"> router.navigateByUrl('../test1/test11')</a>

【讨论】：

【解决方案2】：

我没有看到你的代码，所以这只是一个猜测，但我认为你在 app.component.html 中错过了 router-outlet

<div>
    <router-outlet></router-outlet>
</div>

最后将上面的代码添加到你的 app.component.html 文件中

【讨论】：

对不起，我稍后再检查并告诉你，但目前我对路由器感到厌倦，所以我转向了 ionic 框架 - 并远离了香草 angular2 + bootstrap。 Ionic 框架模仿移动导航并将路由器包装在自己的实现中。这种实现更容易处理。无论如何，我一直在尝试制作移动应用程序的网络版本 - 所以 ionic 是最自然的方式。