单击路由器链接时，以角度2重新加载组件

Question

我有一个角度2 rc6应用程序，该应用程序使用角度2路由器将组件加载到路由器插座。这一切都很好，但我的问题是当用户点击链接[routerLink]他们已经路由到的页面时，他们期望该组件重新加载。

重新加载组件似乎不是angular 2路由器的默认行为，相反它似乎认识到组件已经是当前组件并且什么也不做，有人知道如何更改它吗？

Answer 1

我刚刚碰到同样的问题，找不到合适的解决方案。此外，每个人最好的朋友谷歌都没有多少帮助。在我的情况下，我需要一个通用的活动表单重置行为，并重新加载当前组件似乎是一个非常好的方法。当然，重置表单按钮要好得多，但我看到很多用户都想重新加载页面（通过多次点击同一个链接）。

我设法欺骗路由器重新加载每个routerLink上的组件点击，在AppComponent中使用以下代码：

constructor(private router: Router){
     // override the route reuse strategy
     this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
     }

     this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
           // trick the Router into believing it's last link wasn't previously loaded
           this.router.navigated = false;
           // if you need to scroll back to top, here is the right place
           window.scrollTo(0, 0);
        }
    });

}

希望这可以帮助

米哈伊尔

Answer 2

目前不支持此功能。 https://github.com/angular/angular/issues/9811在某处提到过，计划在以后（最终版本之后）添加更多关于路由组件重用的控制。

通常你重新初始化就像

constructor(route:ActivatedRoute) {
  route.params.subscribe(params => initAfterRouteChange(params));
}

如果这不起作用，因为DOM需要重新初始化（例如，因为某些非Angular2库更新了DOM。您可以使用*ngIf清除组件的DOM并重新添加它。

Answer 3

对我来说，3个步骤正在帮助解决这个问题。

1. 正如Mihail Cuculici所说的那样“欺骗路由器”（在app-component中添加）
2. 添加runGuardsAndResolvers：“always”到路由模块
3. 不知道为什么它失败但是当我试图获取解析器构造函数中的所有数据并且只返回resolve函数中的数据时它只在我第一次加载组件时起作用，所以我将它移动了所有resolve函数。