查询参数更改后 canActivate 不会触发

Question

为什么 route guard - 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) 不会再次开火。为什么？？（我正在使用 angular 5）

Answer 1

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

允许这些值：

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

像这样：

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

查询参数更改后 canActivate 不会触发

canActivate not fire after query params changes

angular

angular-ui-router