Angular 2路由器，href链接和不必要的页面刷新

Question

我目前正在尝试使用 Angular2 (beta1)，但是新路由对我来说有点困惑。

通过 router.navigate 进行导航非常顺畅，但是试图通过普通链接到已注册路由的方式导航会刷新页面。 当然，这会发生在 PathLocationStrategy 下，而 HashLocationStrategy 则按预期工作。

这是一个 bug 还是正常行为？

TIA

- jurito

---

你能展示一些代码或者一个Plunker吗？ - Günter Zöchbauer

Answer 1

你应该使用routerLink，例如：<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]"> 另请参见：https://angular.io/guide/ajs-quick-reference#ng-href 你可以在<a href=...元素或其父级上添加事件监听器，并调用router.navigate...和event.preventDefault()。

- Günter Zöchbauer

---

我也这么认为。问题是我可能需要在从外部JSON加载的HTML文本中使用链接，而且它必须是原始的HTML。在Angular 1.x中运行得很好:( - jurito

routerLink 也会让你在尝试制作可爬行站点（SEO）时噩梦连连。 - Stefan Falk

@displayname，有没有其他的SPA和pushstate的替代方案，不会引起这样的SEO问题？ - Günter Zöchbauer

我在这方面没有深入的了解，但我认为这就是浏览器推送状态的工作方式，以便在不进行完整页面重新加载的情况下更新URL。我猜想，具有支持的URL的站点地图应该允许网络爬虫找出要索引的内容。 - Günter Zöchbauer

事实证明，你是正确的，所以我必须收回我关于Angular的说法。这是标准的HTML行为。不幸的是，我的关于routerLink的陈述仍然是正确的，而且生成站点地图肯定有帮助。尽管如此，如果不必要也没有必要这样做，那就很好了。 - Stefan Falk

Answer 2

你可以尝试像这样在routerLink中传递json到html模板中。

@Component({
  selector: 'app',
  template: `
    <a [routerLink]="routerData">
  `
})
class AppComponent {
  this.routeData = [ '/MyCmp', {myParam: 'value' } ]
}

如果您有链接数组，仍然可以尝试使用*ngFor来实现类似以下内容的操作。

- Gaurav Mukherjee