2017-01-18 3 views
3

Я программирую в проекте Angular 2. У меня есть несколько компонентов, в которых я хочу использовать тот же диалог подтверждения. Поэтому я поставил код подтверждения в отдельный класс. Диалоговое окно должно проверить, хочет ли пользователь продолжить или сохранить данные.Angular2-modal confirm callback

Я использую 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); 
    }