Angular-导航到当前相同的URL，而组件不会重新加载整个页面

Question

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

而这正是我所需要的：

 /**
 * 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属性设置为reload，然后导航到相同的URL，但是什么也没有发生，如下所示：

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

有人以前使用过此功能，可以帮助吗？

Answer 1

我找到了这个解决方法，因为onSameUrlNavigationAngular 5.1 中的属性不是我需要的。

我只需要覆盖shouldReuseRoute，因此如果当前和未来的路由相等，则为我想要刷新的组件路由添加一个例外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);
};

更新：

对于那些想要使用onSameUrlNavigationAngular 5.1 中的新属性的人可以参考这个博客：

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

更新：

最好创建一个RouteReuseStrategy覆盖默认行为的自定义，这就是我的做法：

export class AppRouteReuseStrategy implements BaseRouteReuseStrategy {

  // all other methods will be the same as the default

  /*
  * Determines if a route should be reused.
  * This strategy returns `true` when the future route config and current route config are identical.
  * 
  * but we want to refresh the route if the data.refreshComponent is true in the route definition
  * */
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // so we need to check if it is true. if not, we return the default behavior
    return future.data.refreshComponent ? false : future.routeConfig === curr.routeConfig;
  }
}

然后将其添加provider为AppModule：

{ provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy }

最后要做的事情是标记要刷新的组件，以防导航到相同的路线，如下所示：

const routes: Routes = [
  {
    path: 'view',
    component: ViewComponent,
    data: { refreshComponent: true },
  }
]

Answer 2

如果我正确理解你的意思，这就是我的做法：

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getMovie(id);
        }
    );
}

或观看查询参数：

ngOnInit(): void {
    this.route.queryParams.subscribe(param => {
        this.pageTitle = 'Movie List';
        this.getMovies();
    });
}

在ngOnInit中，我监视参数的更改。当参数更改时，我重新获取数据。

由于所有数据都已绑定，因此页面将使用新检索到的数据“刷新”。