Angular CanDeactivate Guard:如何等待 Observable 的正确值或下一个值?

Angular CanDeactivateGuard: How to wait for the right or the next value of an Obersavble?

我有一个发出事件的服务:

export class MyService {
  private event = new BehaviorSubject<string>('init');
  event$ = this.event.asObservable();

  constructor() { }

  update(): void {
    this.event.next('update');
  }

  accept(): void {
    this.event.next('accept');
  }

  decline(): void {
    this.event.next('decline');
  }
}

我还有一个 CanDeactivateGuard 由组件中的函数触发:

canDeactivate(): Observable<boolean> {
  return this.service.event$.pipe(
    map(action => {
      return action === 'accept';
    })
  )
}

现在一切正常。但我遇到了一个问题:

这将始终是 return 最后一个事件。所以当什么都没发生时它会立即发送 init 。如果调用了update(),它将直接发送update

我怎样才能让它工作,以便它:

您正在接收初始事件,因为它是一个 BehaviorSubject。

您正在接收所有事件,因为您没有过滤掉它们。

您如何处理此问题取决于 event$ 服务的目的。如果发出所有事件(包括初始状态)很重要,那么一定要把它留作行为主体。

我会过滤守卫中的事件:

canDeactivate(): Observable<boolean> {
  return this.service.event$.pipe(
    filter(action => action === 'accept' || action === 'decline'),
    map(action => {
      return action === 'accept';
    })
  );
}

这具有忽略所有非 'accept' 或 'decline' 的效果。

您可以使用 skip 跳过 BehaviorSubject 的第一次发射:

this.service
  .pipe(
    skip(1),
    filter(a => ['accept', 'decline'].includes(a))
  )