Question

我在Angular 5项目中遇到了问题。我试图从我的LocationDetailComponent导航到ClientListComponent。我在LocationDetailComponent的HTML代码中有以下内容：

<a href class="cp" 
(click)="seeClients(ap.name);"> {{ ap.details.apclientcount }} 
</a></td>

LocationDetailComponent：

seeClients(ap): void {
    console.log(ap);
    this.router.navigate(['clients/' + ap]);
}

路线：

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: '', component: HomeComponent},
  {path: 'locations', component: LocationListComponent},
  {path: 'location/:id', component: LocationDetailComponent},          
  {path: 'clients/:id', component: ClientListComponent},
  {path: 'client/:id', component: ClientDetailComponent},
  {path: '404', component: Error404Component},
  // otherwise redirect to 404
  {path: '**', redirectTo: '/404'}
];

当我从LocationListComponent到LocationDetailComponent时这很好用，但是当我转到ClientListComponent时，我看到Component一两秒，然后它重定向回HomeComponent。我不明白为什么？使用RouterModule的{enableTracing：true}选项，我在URL中看到了这一点：

NavigationEnd {id：4，url：“/ clients / W0233-01-008”，urlAfterRedirects：“/ clients / W0233-01-008”}

这是正确的，并加载正确的组件 - 然后突然“导航到http://localhost:4200/”出现，它得到路径'/'。

任何想法为什么？

Answer 1

这是通过不使用<a href>创建指向其他组件的链接来解决的 - 使用<li href>工作。仍然好奇为什么虽然..

Answer 2

当您给带有href的锚标记时，浏览器会自动将您重定向到您在href中给定的链接。如果使用href使光标看起来像指针，请添加带有cursor：pointer的CSS类。

Angular 5路由问题（重定向回到主页）

2 个答案: