Angular2-modal确认回调

Question

I am programming in an Angular 2 project. I have a several component where I want to use the same dialogue confirm box. Therefore i have put the confirm code in a separate class. The dialogue box is supposed to check whether a user wants to continue or save data.

I am using Angular2-modal for this pupose.

When either button on the confirm is pressed, I want to be able to return this answer to the component that called this confirm so I can perform certain actions there.

My code looks like this:

This is the function I call from my component:

this._popup.confirmSaveTemp(this.modal);

This is the function with the confirm code. Currently I can print out OK or cancel in the two spots where I have placed "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
        } );
    });
  }

* Question: How can I inform the "parent" component what the response of this dialogue is OR how can call a function from the "parent" component? *

Answer 1

You can pass functions as parameters like this from the parent class:

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

And in the 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);
  }