2017-01-18 68 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); 
    }