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

Question

navigationByUrl导致导航植根并重新加载

当我使用router.navigate（）或navigationByUrl（）时，我会重新加载-调用根目录。 Chrome开发者工具控制台显示Navigated to http://localhost/

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

应用程式

• 是使用angular-cli生成的。 生成组件然后进行修改。
• 有3个组件：test1，test11（test1的子级）和test2
• 通过带有[routerLink]（说明性）的锚标记链接，可以在test11和test2之间导航正常
• 使用（click）事件从导航到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， 发布到GitHub https://github.com/michaelkariv/angular_router_demo

使用生产环境服务

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

我究竟做错了什么？

Answer 1

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

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

修复使用event.preventDefault（）

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

Answer 2

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

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

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