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
。
我怎样才能让它工作,以便它:
- …等到
accept
或 decline
被发送?
- …等到下一个新事件发出?
您正在接收初始事件,因为它是一个 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))
)
我有一个发出事件的服务:
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
被发送? - …等到下一个新事件发出?
您正在接收初始事件,因为它是一个 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))
)