角度路由错误 - this.router.navigateByUrl() 和 this.router.navigate()答案

【问题标题】：Angular routing bug - this.router.navigateByUrl() and this.router.navigate()角度路由错误 - this.router.navigateByUrl() 和 this.router.navigate()
【发布时间】：2019-12-11 12:18:01
【问题描述】：

我正在创建 Angular 应用程序，它将以比自述文件更复杂的方式处理我的 GitHub 应用程序的文档。我想在点击 topnav 下拉菜单后将用户重定向到选定的路由，但是路由器有问题。（我需要使用一些参数进行重定向，但即使使用简单的路径重新编辑也不起作用）。这些方法重定向到目标路由 1 秒（如例外），然后用户被重定向回根页面。

代码：

  /* First element is project name, second is category/part of application name */
  choices = ["typing_speed_test", "overview"]
  json = json

  constructor(private router: Router){}

  onProjectClick($event){
    this.choices[0] = $event.target.innerHTML.trim();
    this.choices[1] = "overview";
    this.redirect();
  }

  onCategoryClick($event){
    this.choices[1] = $event.target.innerHTML.trim();
    this.redirect();
  }

  redirect(){
    this.router.navigateByUrl("404");
  }

路线：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'project/:project_name/:category', component: SubpageComponent },
    { path: '404', component: NotFoundComponent },
    //{ path: '**', redirectTo: '404', pathMatch: 'full' }
];

有问题的 gif 链接：https://imgur.com/a/x2mPxvh github repo 中的完整代码：https://github.com/Dolidodzik/DocsForMyApps（如果您使用此处的代码回答此问题，请在您的回答中指出）

我想我可能犯了一些愚蠢的错误，因为我是 Angular 的新手，但我做不到，因为每个谷歌问题都显示我解决了错误，重定向根本不起作用，而不是错误就像我的情况一样。

【问题讨论】：

标签： javascript angular routing

【解决方案1】：

您需要从导航栏中的锚链接中删除href="#"。它导致浏览器重新加载：

<a class="dropdown-item" *ngFor="let item of categories() | keyvalue">
  {{item.key}}
</a>

这也是一个有点奇怪的解决方案：

this.choices[0] = $event.target.innerHTML.trim();

您最好在模板的函数调用中发送item 变量，然后您可以在组件事件处理程序中读取它：

onProjectClick(item){
  this.choices[0] = item.key;
  this.choices[1] = "overview";
  this.redirect();
}

【讨论】：

【解决方案2】：

问题是你的 lins 看起来像这样：

 <a href="#" (click)="navigateInsideApp(routeX)">link</a>

默认链接行为会导致您的应用从头开始重新加载。你应该使用[routerLink]="['someUrl']" 而不是href。如果您在某些情况下需要该 href，请考虑调用 $event.preventDefault() 以取消本机浏览器导航

【讨论】：