0

这是我的 canDeactivate Guard：

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate, 
  route: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }   
}

这就是我在 HomeComponent 路由中的称呼：

{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], canDeactivate: [CanDeactivateGuard]},

在 MyService 中，我有这个主题：

private backButtonEnabled = new BehaviorSubject<boolean>(true);
currentBackButtonEnabled = this.backButtonEnabled.asObservable();

changeCurrentBackButtonEnabled(goBack: boolean){
  this.backButtonEnabled.next(goBack);
}

在另一个组件中，FiltersComponent，我有这个功能：

openFilters() {
  ...
  this.myService.changeCurrentBackButtonEnabled(false);
}

在 HomeComponent 中，我像这样调用 canDeactivate：

canDeactivate(): Observable<boolean> | boolean | Promise<boolean> {
  this.myService.currentBackButtonEnabled.subscribe(res => {
    console.log(res) //ALWAYS TRUE
  })
  return this.myService.currentBackButtonEnabled;
}

在 appModule 中：

...

  providers: [
    CanDeactivateGuard,
    MyService
  ],

问题陈述：

currentBackButtonEnabled 始终为 true，即使用户（单击）openFilters() 函数，其中 currentBackButtonEnabled 变为 false

4

2 回答 2

0

您应该订阅 observable 以获取其新值。

this.guardService.canDeactivate().pipe(
      catchError(err => {
        this.logger.error('Observable error', err);
        throw err;
      })
    )
      .subscribe((newState) => { // do something }
      });

此外，您应该将您的服务注入组件，然后将事件广播到应该对其更改采取行动的组件，而不是相反。

于 2021-03-20T13:12:45.497 回答
0

我不完全理解您的代码，但请注意

return component.canDeactivate ? component.canDeactivate() : true;

在类型脚本类/Angular 组件类中不能有同名的变量和函数。因此，这一行检查是否存在 --canActivate这始终是正确的；因为您在该组件上使用该名称定义了一个函数。

如果component.canDeactivate()存在，则执行。

并根据您的代码：

canDeactivate(): Observable<boolean> | boolean | Promise<boolean> {
  return this.service.currentBackButtonEnabled;
}

如果该canActivate()方法返回一个 Observable 或 Promise，那么只要定义了该值，从布尔的角度来看，它将被视为 true。

此代码将返回 false 的唯一情况是如果canDeactivate()返回布尔值 false。如果你想从 Observable 或 Promise 中获取结果，你必须订阅它。

于 2021-03-20T13:06:18.950 回答