Angular2 CanDeactivate с асинхронной наблюдаемой

Question

Я смотрю на охрану и пытаюсь предотвратить навигацию с помощью CanDeactivate. Я хочу показать простой модал с помощью кнопки "Сохранить / Отмена", "Сохранить = навигация" и "Хорошо", "Отмена = Отмена"

У меня 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');
}

При первом "Сохранить" ничего не происходит после показа модала. На втором "Сохранить" навигация произойдет, прежде чем я отвечу модальной. Как я могу решить это в нужное время?