Angular routerLink 路由正确但 route.navigate 在组件路由到默认路径

Question

基本示例已创建
源代码是 Uploaded Here 和 Deployed Here

路径设置为：“products”
在 app.template.html 中使用 routerLink 指令设置了一个路由 -> 单击“产品”时 --> 路线“产品”打开为预期，但通过代码激活相同的路由 “app.component.ts”中的 (this.route.navigate(['/products']) 导航对此 'home'.

这是基本的但很奇怪，我哪里错了？

Answer 1

它在第 19 行的 app.component.html 上被重定向：

<a class="nav-link" href="#" (click)="navigateBack()"> Products(navigated in Component)</a>

此标签有 href="#"，因此页面被路由到您的根目录，因为您的 app-routing.module.ts 文件正在重定向到主页。

  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', redirectTo: 'home', pathMatch: 'full' }

因此，删除 href="#" 和 [routerLink]="[]" 应该可以解决问题。

Angular routerLink routes properly but route.navigate in component routes to default path