Angular2 CanDeactivate with async observable

Question

我正在调查Guards并试图阻止CanDeactivate导航.我想用Save/Cancel显示一个简单的模态,save = navigate and well,cancel = cancel.

我有CanDeactivate工作,但似乎它没有在正确的时间解决

Guard.ts

canDeactivate(component: PortfolioModelComponent) {
    component.saveChanges(); // Opens modal
    return component.modalResponse.take(1); // isnt happening at the right time
}

Component.ts

 public modalResponse: Observable<boolean> = new Observable((observer) => { });

public saveChanges() {
    this.openSaveChangeModal();
}

// Modal save changes
public openSaveChangeModal() {
    $('#savePortfolioChangesModal').modal();
}

public closeSaveChangesModal() {
     this.modalResponse = new Observable((observer) => {
        observer.next(false);
    });
    $('#savePortfolioChangesModal').modal('hide');
}

public saveSaveChangesModal() {
    this.modalResponse = new Observable((observer) => {
        observer.next(true);
    });
    $('#savePortfolioChangesModal').modal('hide');
}

在第一次"保存"时,一旦显示模态,就不会发生任何事情.在第二个"保存",导航将在我回答模态之前发生.如何在合适的时间解决问题？