单击路由器链接时以 Angular 2 重新加载组件答案

【问题标题】：Reload component in angular 2 when router link clicked单击路由器链接时以 Angular 2 重新加载组件
【发布时间】：2016-09-05 20:58:08
【问题描述】：

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

重新加载组件似乎不是 Angular 2 路由器的默认行为，而是似乎识别出该组件已经是当前组件并且什么都不做，有人知道如何更改吗？

【问题讨论】：

你能分享任何代码吗？
说实话这里并没有太多代码可以分享，你只需要一个带有[routerLink]属性的链接，然后点击两次，第一次加载组件，第二次什么也没发生。

标签： angular

【解决方案1】：

我刚刚遇到了同样的问题，但找不到合适的解决方案。此外，每个人最好的朋友谷歌也没有太大帮助。就我而言，我需要一个通用的主动表单重置行为，并且重新加载当前组件似乎是一个不错的方法。当然，重置表单按钮要好得多，但我看到很多用户都想重新加载页面（通过多次单击同一个链接）。

我设法欺骗 Router 在每次 routerLink 点击时重新加载组件，在 AppComponent 中使用以下代码：

constructer(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);
    }
  });
}

【讨论】：

但是 [routerLinkActive] 不再起作用了。你有解决方案吗
小心，上面的代码会导致[routerLinkActive]总是假的。我在这个问题上苦苦挣扎了好几个小时。
constructor，不是constructer

【解决方案2】：

目前不支持此功能。 https://github.com/angular/angular/issues/9811 有人在某处提到，计划在以后（在 final 之后）增加对路由组件重用的更多控制。

通常你像这样重新初始化

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

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

【讨论】：

【解决方案3】：

对我来说，3 个步骤有助于解决这个问题。

Mihail Cuculici 所说的“欺骗路由器”（添加到应用程序组件中）
在路由模块中添加runGuardsAndResolvers: "always"
不确定为什么会失败，但是当我尝试在解析器构造函数中获取所有数据并仅在 resolve 函数中返回数据时，它仅在我第一次加载组件时才起作用，因此我将其全部移动resolve 函数。

【讨论】：