Angular-导航到当前相同的URL，而组件不会重新加载整个页面 [英] Angular - Navigate to current same URL with component reload not the whole page

问题描述

我正在使用Angular 5库，我想导航到当前URL并重新加载（刷新）整个组件而不是页面，我已经阅读了有关导航到Angular文档中当前URL的信息。

I am using Angular 5 library, I want to navigate to current URL with reload (refresh) the whole component not the page, I have read about navigation to current URL in angular document.

这就是我所需要的：

 /**
 * Define what the router should do if it receives a navigation request to the current URL.
 * By default, the router will ignore this navigation. However, this prevents features such
 * as a "refresh" button. Use this option to configure the behavior when navigating to the
 * current URL. Default is 'ignore'.
 */
onSameUrlNavigation: 'reload' | 'ignore';

现在，我尝试将设置为onSameUrlNavigation 属性以重新加载，然后导航到相同的URL，但是什么也没发生，像这样：

Now, I have tried to set the onSameUrlNavigation property to reload and then navigate to the same URL, but nothing happend, like this:

this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['view'], { queryParams: { QueryUUID: selectedId } });

以前有人使用过吗，可以帮忙吗？

Anyone have use this before, can help?

推荐答案

我找到了这种解决方法，因为我不需要Angular 5.1中的 onSameUrlNavigation 属性。

I have find this workaround method since the onSameUrlNavigation property in Angular 5.1 is not what I need.

我只需要覆盖 shouldReuseRoute ，所以为当前和将来的路由添加了要刷新的组件路由的例外等于视图。

I just need to override shouldReuseRoute, so added an exception for the component route that I want to refresh, if the current and future route are equal view.

而且我也可以毫无问题地导航到其他路线，甚至从Angular Material sidenav 导航。

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
};

---

更新：

对于那些想要使用Angular 5.1中新的 onSameUrlNavigation 属性的用户，可以参考此博客：

For those they want to use the new onSameUrlNavigation property in Angular 5.1 you can refer to this blog:

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

这篇关于Angular-导航到当前相同的URL，而组件不会重新加载整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！