角度2：使用CanDeactivate，但显示模式而不是窗口。

Question

如何使用引导模式而不是确认来使用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');
}

但是我正在处理

TypeError：无法读取未定义的属性“ saveChanges”

Answer 1

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

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");

        });  
}

您可以避免将事件处理程序与角度引导程序库（而不是jQuery引导程序）一起使用。