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

Question

我正在创建一个角度应用程序，它将处理我的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 : github：https://imgur.com/a/x2mPxvh完整代码：https://github.com/Dolidodzik/DocsForMyApps (如果您使用这里的代码回答这个问题，请在您的答案中指出这一点)

我想我可能犯了一些愚蠢的错误，因为我在角度上很新，但我做不到，因为谷歌的每一个问题都给我解决了错误，当重定向根本不起作用的时候，不是像我这样的错误。

Answer 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();
}

Answer 2

问题是你的线人长得像这样

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

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