angular2：为相同的路径和组件但参数不同调用canDeactivate

问题描述

在我的应用程序中，有多个具有相同路由但具有不同queryParams和片段的链接。

例如，我有类似的链接：

.../pages/golestan/npform?fid=26270#26270
.../pages/golestan/npform?fid=26280#26280
.../pages/golestan/npform?fid=26290#26290

当我在上述路线之一中并且通过不同的参数导航到同一条路线时，该路线没有改变，但是通过更改RouteReuseStrategy可以解决此问题。 现在我想调用canDeactivate更改路线，当我导航到其他路线时调用canDeactivate，但是当我通过不同的queryParams和fragment导航到同一条路线时，不会调用canDeactivate！

const routes: Routes = [{
    ...
    {
      path: 'npform',component: NpFormComponent,canDeactivate: [
        NpFormGuard
      ],},...
}];

@NgModule({
  declarations: [
    NpFormComponent
  ],imports: [ ...
    RouterModule.forChild(routes)
  ],providers: [
    NpFormGuard
  ]
})
export class GolestanModule { }

@Injectable({providedIn: 'root'})
export class NpFormGuard implements CanDeactivate<KoFormComponent> {
  canDeactivate(
    component: NpFormComponent,currentRoute: ActivatedRouteSnapshot,currentState: RouterStateSnapshot,nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree 
  {
    return !component.webBusy;
  }
}

import { Router } from '@angular/router';
constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = (future: ActivatedRouteSnapshot,current: ActivatedRouteSnapshot) => {
        const defaultReuse = (future.routeConfig === current.routeConfig);
        if(future.routeConfig&&future.routeConfig.path=='npform'&&
             (future.queryParams.fid||current.queryParams.fid)&&(future.queryParams.fid!=current.queryParams.fid))
            return false;
        return defaultReuse;
    
    };
}

解决方法

通过使用 RunGuardsAndResolvers 参数并将其设置为“始终”解决了我的问题。 此配置每次运行保护。

const routes: Routes = [{
    ...
    {
      path: 'npform',component: NpFormComponent,runGuardsAndResolvers: 'always',canDeactivate: [
        NpFormGuard
      ],},...
}];

见https://angular.io/api/router/RunGuardsAndResolvers