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

Question

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

当我使用router.navigate（）或navigateByUrl（）时，我得到一个重新加载 - 对root的调用。 Chrome Dev工具控制台显示 Navigated to http://localhost/

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

app

• 是使用angular-cli生成的。生成组件然后进行修改。
• 有3个组件测试1，测试11（测试1的孩子）和test2
• test11和test2之间的导航通过[routerLink]的锚标签链接正常工作（声明性）
• 通过使用（click）事件和编程（命令性）导航调用 this.router.navigateByUrl('/test1/test11'); 从test2导航到test11

environment

   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

code

发表于GitHub，published to GitHub https://github.com/michaelkariv/angular_router_demo

served by ng serve using production environment

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

What am I doing wrong?

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>