Angular2-modal 确认回调答案

【问题标题】：Angular2-modal confirm callbackAngular2-modal 确认回调
【发布时间】：2017-06-23 14:04:46
【问题描述】：

我正在一个 Angular 2 项目中编程。我有几个组件，我想在其中使用相同的对话框确认框。因此，我已将确认代码放在单独的类中。该对话框应该检查用户是要继续还是要保存数据。

我为此目的使用 Angular2-modal。

当按下确认上的任一按钮时，我希望能够将此答案返回给调用此确认的组件，以便我可以在那里执行某些操作。

我的代码如下所示：

这是我从组件中调用的函数：

this._popup.confirmSaveTemp(this.modal);

这是带有确认码的函数。目前我可以在我放置“TODO”的两个位置打印出OK或取消。

confirmSaveTemp(modal, target, param){
    console.log(target);
    modal.confirm()
    .size('lg')
    .isBlocking(true)
    .showClose(false)
    .keyboard(27)
    .title('Warning')
    .body(`
      <p><b>Some fields have been <span class="text-danger">marked with red</span> because of one or several following reasons:</b></p>
      <ul>
          <li>You forgot to fill out all input fields</li>
          <li>Entered values are unrealistically high or low</li>
          <li>Use of illegal characters (e.g. typing letters instead of numbers for a persons age)</li>
      </ul>
      <p><b>Please make sure that you have filled out the form correctly.</b></p>
      <p>
        <b>If you are finished entering all values for this page and want to permanently save, click <span class="text-success">Continue</span>.</b>
        <br>
        <b>If you expect to enter the remaining values at another time click <span class="text-warning">Save Temporarily</span></b>
      </p>
      <p></p>
    `)
    .footerClass('defaultPopupFooter')
    .okBtn('Continue')
    .cancelBtn('Save Temporarily')
    .okBtnClass('btn btn-success')
    .cancelBtnClass('btn btn-warning')
    .open()
    .then( (resultPromise) => {
        resultPromise.result.then( (result) => {
          //TODO - CALL SAVE FUNCTION
        }, 
        () => {
          //TODO - SAVE TEMP
        } );
    });
  }

* 问题：如何告知“父”组件此对话的响应是什么，或者如何从“父”组件调用函数？ *

【问题讨论】：

标签： javascript angular modal-dialog bootstrap-modal

【解决方案1】：

你可以像这样从父类传递函数作为参数：

private okCallback() {
    // do stuff on ok
}

private cancelCallback() {
    // do stuff on cancel
}

openModal() {
    // ...
    this._popup.confirmSaveTemp(
        this.modal,
        target,
        param,
        this.okCallback.bind(this),
        this.cancelCallback.bind(this)
    );
}

而在confirmSaveTemp：

confirmSaveTemp(modal, target, param, okCallback, cancelCallback){
    console.log(target);
    modal.confirm()
    // ...
    .open()
    .then( (resultPromise) => {
        resultPromise.result.then( (result) => {
          //TODO - CALL SAVE FUNCTION
        }, 
        () => {
          //TODO - SAVE TEMP
        } );
    })
    // on OK click
    .then(okCallback)
    // on Cancel click
    .catch(cancelCallback);
  }

【讨论】：