router.navigateByUrl（）导致导航到root并重新加载，角度为2.4.7

Question

navigateByUrl导致导航到root并重新加载

当我使用router.navigate（）或navigateByUrl（）时，我得到一个重载 - 一个 打电话给根。 Chrome Dev工具控制台显示 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 --host localhost --port 80 --live-reload false -prod

我做错了什么？

Answer 1

我还没有看到你的代码，所以这只是一个猜测，但我认为你错过了app.component.html中的路由器插座

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

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

Answer 2

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

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

修复使用event.preventDefault（）

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