angular - Can Deactivate Guard 只能在 Angular 中运行一次

Question

是的，我知道这是一个duplicate issue但以前的帖子并没有解决它。 守卫代码：

  canDeactivate(component: ExamEndedComponent,
                currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.store.select(fromRoot.getExamStatus)
      .pipe(
        take(1),
        map((res: string) => {
          console.log(res);
          if (res === 'started') {
            alert('stop');
           console.log(currentState.url);
            return false;
          }
          return true;
        })
      );
  }

但问题是当点击back button浏览器时，守卫只执行一次，所以当clicking again用户实际上可以导航离开时。 还检查了 angular 中的问题：https ://github.com/angular/angular/issues/12851 但它尝试通过在返回 false 之前再次导航到当前路线来解决问题，如下所示：

 canDeactivate(component: ExamEndedComponent,
                currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.store.select(fromRoot.getExamStatus)
      .pipe(
        take(1),
        map((res: string) => {
          console.log(res);
          if (res === 'started') {
            alert('Deactivation blocked');
           console.log(currentState.url);
            this.router.navigate([currentState.url]);
            return false;
          }
          return true;
        })
      );
  }

此时 alert 被调用了两次，因为在返回 false 之前我导航到 currentState 所以角度运行 candeactivate 再次但是在再次单击后退按钮后 canDeactivate 没有被调用。路由表：

const appRoutes: Routes = [
  { path: 'Authentication', component: AuthComponent},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent, children: [
      {path: '', redirectTo: 'exam', pathMatch: 'full'},
      {path: 'exam', component: ExamComponent, children: [
          {path: '', redirectTo: 'start', pathMatch: 'full'},
          {path: 'start', component: ExamStartComponent},
          {path: 'started', component: ExamQuestionsComponent,
            canActivate: [ExamQuestionsGuard],
            canDeactivate: [ExamStartedDeactivateGuard]},
          {path: 'ended', component: ExamEndedComponent, canDeactivate: [ExamStartedDeactivateGuard]}
        ], resolve: {exam:  ExamResolver}}
    ],
    canActivate: [AuthGuard], resolve: {sign: SignInResolver}}
];

问题是什么 ？提前致谢 。

标签： angularangular-routingangular-router