angular - Angular2 CanDeactivate 与异步可观察

Question

我正在研究 Guards 并试图阻止使用 CanDeactivate 进行导航。我想用保存/取消显示一个简单的模式，保存 = 导航，好吧，取消 = 取消。

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

Guard.ts

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

组件.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');
}

在第一次“保存”时，一旦显示模态，什么都不会发生。在第二个“保存”上，导航会在我回答模态之前发生。我怎样才能让它在正确的时间解决？