Angular 2 路由器、href 链接和不需要的页面刷新答案

【问题标题】：Angular 2 Router, href links and unwanted page refreshAngular 2 路由器、href 链接和不需要的页面刷新
【发布时间】：2016-01-14 10:32:59
【问题描述】：

我目前正在试验 angular2 (beta1)，我对新路由器有点疑惑。

通过 router.navigate 导航就像一个魅力，而尝试通过一个注册路由的正常链接来刷新页面。这当然发生在 PathLocationStrategy 中，因为 HashLocationStrategy 可以按预期工作。

这是一个错误还是正常行为？

TIA

【问题讨论】：

你能显示一些代码或一个plunker吗？

标签： typescript angular angular2-routing

【解决方案1】：

您应该改用routerLink。例如<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">

另见https://angular.io/guide/ajs-quick-reference#ng-href

您可以将事件侦听器添加到<a href=... 元素或父元素并调用router.navigate... 和event.preventDefault()。

【讨论】：

我是这么认为的。问题是我可能需要从外部 JSON 加载的 html 文本中的链接，并且它必须是 vanilla html。在 Angular 1.x 中工作正常 :(
routerLink 在尝试创建可抓取网站 (SEO) 时也会给您带来噩梦。
@displayname 对于 SPA 和 pushstate，是否有任何替代方案不会导致此类 SEO 问题？
我在这里没有深入的了解，但我认为这正是浏览器 pushstate 的工作方式，无需重新加载整个页面即可更新 URL。我猜一个带有受支持 URL 的站点地图应该允许爬虫找出要索引的内容。
Aaa 事实证明你是对的，所以我必须收回我所说的关于 Angular 的话。这是标准的 HTML 行为。不幸的是，我关于routerLink 的声明仍然正确，是的，生成站点地图肯定会有所帮助。不过，如果不必这样做，那就太好了。

【解决方案2】：

您可以尝试像这样在 routerLink 上的 html 模板中传递 json。

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

如果您有链接数组，您仍然可以使用 *ngFor 尝试类似的操作

【讨论】：