Возврат Наблюдаемый в canDeactivate не работает

Question

У меня есть модальный диалог подтверждения/отмены, который появляется, когда пользователь покидает маршрут. Я делаю это, используя охрану с методом canDeactivate. Однако я хочу, чтобы canDeactivate дождался, пока он не получит ответ от модальности, прежде чем возвращать что-либо.

Я попытался сделать это, возвратив наблюдаемый, но он не работает.

canDeactivate(): Observable<boolean> | boolean { 
    if(this.isFormStarted()) { 
     this.formService.showExitModal(true); 
     return this.formService.getModalSelectionObservable(); 
    } 
    else { 
     return true; 
    } 
} 

Ничего не происходит, когда я нажимаю подтвердить, даже если я могу видеть, что наблюдаемая работает нормально, когда я делаю console.log внутри если блок

this.formService.getModalSelectionObservable().subscribe(
     value => console.log("dialog value: " + value) 
    ); 

Вот как форма обслуживания выглядит ,

private modalConfirmation = new Subject<boolean>(); 

public setModalSelectionObservable(confirmLeave: boolean) { 
    this.modalConfirmation.next(confirmLeave); 
} 
public getModalSelectionObservable(): Observable<boolean> { 
    return this.modalConfirmation.asObservable(); 
} 

Answer 1

Использование take(1) или first() (не забудьте импортировать)

return this.formService.getModalSelectionObservable().first(); 

обеспечить наблюдаемый закрыт после первого события, в противном случае маршрутизатор будет ждать, пока оно не будет закрыто от службы.

Answer 2

Просто положить это здесь, в случае кто-то в будущем, как неосторожно, как я:

Если компонент имеет функцию hasUnsavedChanges() ваш метод canDeactivate() нужно будет возвращать !hasUnsavedChanges().

Но если вы начнете использовать наблюдаемый для hasUnsavedChanges, вы будете возвращать !hasUnsavedChanges$, который будет просто ложным.

Если вам нужна поддержка как вы можете сделать это:

canDeactivate(component: C) 
{ 
    var hasUnsavedChanges = component.hasUnsavedChanges(); 

    if (typeof (hasUnsavedChanges) === 'boolean') 
    { 
     return !hasUnsavedChanges; 
    } 
    else 
    { 
     return hasUnsavedChanges.map(x => !x); 
    } 
}