查询参数更改后 canActivate 不触发答案

【问题标题】：canActivate not fire after query params changes查询参数更改后 canActivate 不触发
【发布时间】：2019-03-13 13:14:24
【问题描述】：

为什么路由保护 - canActivate 在使用不同的查询参数导航相同的 url 后不触发：

在 app.module 中：

const appRoutes: Routes = [
  {
    path: '', component: MainPageComponent, canActivate: [MyGuardService], 
     children: [
      { path: 'MyList', component: ListComponent }
    ] .....

RouterModule.forRoot(
      appRoutes,
      {
        onSameUrlNavigation: 'reload'
      } 
    ),

在 ListComponent 中：

constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }

当我运行http://localhost:4200/MyList?id=24 canActivate 守卫 (MyGuardService) 着火了。

我在 ListComponent 中有一个运行的点击事件：

this.router.navigate([`/MyList`], { queryParams: { id: '25'} });

并且使用新的 id 重新加载页面，但是 - canActivate 守卫（MyGuardService）不会再次触发。为什么？？（我使用的是角度 5）

【问题讨论】：

标签： angular angular-ui-router

【解决方案1】：

您可以将属性“runGuardsAndResolvers”设置为您的路由配置。

这些值是允许的：

export declare type RunGuardsAndResolvers = 'paramsChange' | 'paramsOrQueryParamsChange' | 'always';

像这样：

{ path: 'MyList', 
  component: ListComponent, 
  runGuardsAndResolvers: 'paramsOrQueryParamsChange' }

【讨论】：