When implementing my canDeactivate() route guard, I encounter an issue with calling a modal that contains two buttons: ok and cancel. The goal is to return true when the user clicks the ok button to allow them to leave the page, and false when the cancel button is clicked. Below is the current code snippet:
canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
let can = component.canDeactivate();
//let result = new Observable<boolean>();
let okResult = new Observable<boolean>();
let cancelResult = new Observable<boolean>();
if (!can) {
component.myChangesModal.show('Warning', 'You are about to leave this page with unsaved changes.');
okResult = component.myChangesModal.okEvent.map(() => true);
//okResult.subscribe();
cancelResult = component.myChangesModal.cancelEvent.map(() => false);
//cancelResult.subscribe();
console.log(okResult);
console.log(cancelResult);
const observablesArray = [okResult, cancelResult];
let result = Observable.combineLatest.apply(this, observablesArray).take(1);
result.subscribe();
return result;
}
return true;
}
Initially, I had a simpler implementation where only one observable was used to monitor clicks on the ok button and it worked flawlessly for that single action. However, when attempting to expand it to work with multiple buttons, such as the cancel button, issues arose. Here is the original code snippet that functioned perfectly for a single button:
canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
let can = component.canDeactivate();
let result = new Observable<boolean>();
if (!can) {
component.myChangesModal.show('Warning', 'You are about to leave this page with unsaved changes.');
result = component.myChangesModal.okEvent.map(() => true);
result.subscribe();
return result;
}
return true;
}
I seek guidance on what mistakes I might be making in trying to incorporate multiple observables into my canDeactivate modal, and how to rectify the problem.