Angular2 路由错误地重新加载主页答案

【问题标题】：Angular2 route incorrectly reloads home pageAngular2 路由错误地重新加载主页
【发布时间】：2018-11-21 09:40:15
【问题描述】：

有一个简单的演示站点，有 2 个页面（主页和项目）。当我通过菜单栏从主页单击到项目页面时，一切正常。但是，当我在项目页面的链接上单击主页上的链接时，会显示第二个项目页面，然后重新加载主页。有人知道可能出了什么问题吗？如果我用按钮替换锚，它也可以正常工作！所以我猜 href=""

有问题

路线：

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

@NgModule({
  imports: [
  ...,
  RouterModule.forRoot(routes, { useHash: true })
],
exports: [
],

})

导航栏（工作正常）：

<a [routerLink]="['/project']" class="nav-link">Project</a>

html（主页 - 恰好是一个组件）：

<a href="" (click)="showProject()">project</a>

（组件的）打字稿：

import { Router } from '@angular/router';

constructor(private router: Router) {
  ...
}

public showProject() {
  this.router.navigate(['/project']);
}

【问题讨论】：

你能在stackblitz中创建一个demo来重现这个问题吗？

标签： angular angular2-routing

【解决方案1】：

最重要的是，你需要去掉html页面上的href属性：

HTML 锚点：

<a href="" (click)="showProject()">project</a>

必须在没有href 属性的情况下使用。

<a (click)="showProject()">project</a>

否则，页面将被完全重新加载。然后，关于路由配置的一些建议。更改路线constant：

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', redirectTo: '' }
];

在组件中只需修改showProject 方法：

public showProject() {
  this.router.navigate(['project']);
}

【讨论】：

【解决方案2】：

尝试一个空的 [routerLink]

  <a [routerLink]="" (click)="showProject()">project</a>

【讨论】：

【解决方案3】：

似乎可行的方法是替换锚的 href：

<a href="javascript:void(0)" (click)="showProject()">

【讨论】：