angular - Angular2 CanDeactivate with async observable

Question

Guards を調べて、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');
}

最初の「保存」では、モーダルが表示されると何も起こりません。2 回目の「保存」では、モーダルに応答する前にナビゲーションが行われます。適切なタイミングで解決するにはどうすればよいですか?