2017-01-18 29 views
3

我在Angular 2项目中编程。我有几个组件,我想使用相同的对话框确认框。因此,我已将确认代码放在单独的课程中。对话框应该检查用户是否想要继续或保存数据。Angular2模式确认回调

我正在使用Angular2-modal进行此操作。

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

我的代码如下所示:

这是我从我的组件调用该函数:

this._popup.confirmSaveTemp(this.modal); 

这与确认代码的功能。目前,我可以打印出“确定”或取消放置“TODO”的两个位置。

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

*问:我怎样才能告知“父”组件这是什么对话的反应是什么或如何可以称之为从“父”组件的功能? *

回答

0

您可以从父类函数作为参数是这样的:

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