Angular 2 : Use CanDeactivate,但显示模式而不是window.confirm

如何使用引导模式而不是确认来使用CanDeactivate？事实是:如何在执行此过程的过程中返回可观察的结果？

代码如下。 CheckoutComponent 是相同的组件，我有模式，我想防止其停用

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

public saveChanges() { ///OPEN MODAL AFTER CANDEAC
    this.openSaveChangeModal();
    return this.modalResponse.take(1);
}

canDeactivate(component: CheckoutComponent){
    if(this.nav)
        return true;

    else{
        component.saveChanges(); // Opens modal
    return component.modalResponse.take(1);
    }
}

// Modal save changes
public openSaveChangeModal() {
    jQuery('#deactModal').modal();
}

public acceptNavigate(){
    this.modalResponse = new Observable((observer) => {observer.next(true); });
    jQuery('#deactModal').modal('hide');
}

public cancelNavigate(){
    this.modalResponse = new Observable((observer) => { observer.next(false); });

    jQuery('#deactModal').modal('hide');
}

但我正在处理

最佳答案

返回Promise而不是Observable可能会更好，因为您只需要一次 bool 回答。然后，您可以将单击事件添加到解决 promise 的模式的按钮中:

canDeactivate(): Promise<boolean> {

        let $modal = jQuery('#deactModal').modal();
        return new Promise<boolean>((resolve, reject) => {
          document.getElementById("btnAccept").onclick = ((e: any) => {
              jQuery('#deactModal').modal('hide');
              resolve(true);
          });

          document.getElementById("btnCancel").onclick = ((e: any) => {
              jQuery('#deactModal').modal('hide');
              resolve(false);
          });

          $modal.modal("show");

        });
}

您可以避免将事件处理程序与 Angular bootstrap 库(而不是jQuery bootstrap )一起使用。