I have a confirm/cancel modal dialog that pops up when a user leaves a route. I do this by using a guard with the canDeactivate method. However I want canDeactivate to wait until it gets a response from the modal before returning anything.
I have tried to do this by returning an observable but it is not working.
canDeactivate(): Observable<boolean> | boolean {
if(this.isFormStarted()) {
this.formService.showExitModal(true);
return this.formService.getModalSelectionObservable();
}
else {
return true;
}
}
Nothing is happening when I click confirm even though I can see that the observable is working fine when I do a console.log inside the if block
this.formService.getModalSelectionObservable().subscribe(
value => console.log("dialog value: " + value)
);
Here is how the form service looks.
private modalConfirmation = new Subject<boolean>();
public setModalSelectionObservable(confirmLeave: boolean) {
this.modalConfirmation.next(confirmLeave);
}
public getModalSelectionObservable(): Observable<boolean> {
return this.modalConfirmation.asObservable();
}
Use
take(1)
orfirst()
(don't forget to import)to ensure the observable is closed after the first event, otherwise the router will wait until it is closed from the service.
Just putting this here in case someone in future is as careless as me:
If your component has a function
hasUnsavedChanges()
yourcanDeactivate()
method would need to return!hasUnsavedChanges()
.But then if you start using an observable for
hasUnsavedChanges
, you'll be returning!hasUnsavedChanges$
which will just be a falsey value.If you need to support both you can do this: