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

Question

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

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。

我怎样才能让它工作，以便它：

…等到 accept 或 decline 被发送？
…等到下一个新事件发出？

Answer 1

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

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

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

我会过滤守卫中的事件：

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

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

Answer 2

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

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

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

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

angular

rxjs

observable

angular9

candeactivate