/ / Manipulando dois observáveis ​​em canDeactivate - angular, datilografado, observável

Manipulando dois observables em canDeactivate - angular, datilografado, observável

Na minha guarda de rota canDeactivate (), eu estou chamando ummodal que tem dois botões: ok e cancelar. Quero retornar true se o botão ok for clicado para que o usuário possa continuar saindo da página e retornar false se o botão cancelar for clicado. Aqui está meu código atual:

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;
}

Inicialmente, ao testar isso, eu só tinha umúnico observável para verificar quando o botão ok é chamado e, em seguida, assiná-lo e retornar o resultado. Isso funcionou, no entanto, só funcionou para um botão e sempre que clicar no botão cancelar isso quebrou tudo. Aqui está o que eu tinha inicialmente que funcionou perfeitamente para apenas um botão.

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;
}

O que estou fazendo errado ao tentar obter meu modal canDeactivate para trabalhar com mais de um observável, e o que devo fazer?

Respostas:

4 para resposta № 1

CombineLatest aguardará até que ambos os observáveis ​​emitam um valor. Isso nunca acontece no seu caso. Você quer Observable.merge em vez de.

return okResult.merge(cancelResult).take(1)

ou

return Observable.merge(okResult, cancelResult).take(1)