使用Angular 2

时间:2017-02-01 13:34:43

标签: javascript angular browser-history html5-history

我使用Angular 2(v2.4.4)并使用routerLink我在组件之间导航。

这样可以正常工作,但是如果我使用相同的快照参数(active.snapshot.params)加载非常保存的组件,页面将不会再次加载。因此,例如,如果我在/page/56并点击此处指向/page/56的链接,相同的链接(来自菜单或其他内容),则该组件不会重新加载。 (自上次加载以来,数据库中的内容可能会发生变化,因此需要重新加载页面。)

我通过指向/jump/page/56并将 Page 404 控制器重定向到/page/56来绕过它。

这也可以正常使用,但如果我从/page/56导航回浏览器,它将转到/jump/page/56,它由{em> Page 404 /page/56 >控制器。所以基本上我无法导航回来。

据我所知,我无法通过HTML5历史记录API删除浏览器历史记录,但我怎么能回到/page/56之前的页面,只需单击后面的按钮即可。浏览器?

解决方案可能是一个独立于Angular 2的简单JavaScript技巧,因为它实际上并不加载新页面只是加载不同的组件并更改URL。 (也正因为如此,我不应该使用location.reload(),因为它将重新加载Angular 2和所有依赖JS等。)

提前感谢您的解决方案!

2 个答案:

答案 0 :(得分:3)

你可以使用skipLocationChange赞:

this.router.navigate(['/jump/page/12'],{skipLocationChange:true});

答案 1 :(得分:0)

似乎唯一的方法是创建自己的继承自[routerLink]的dicrective来控制点击处理程序,或者只需将click处理程序添加到当前元素并自行管理刷新。

 <a (click)="navigate(['/jump/page/56'])">Navigate</a>

,其中

navigate(route) {
  this.router.navigate(route, {replaceUrl: true});
}