2017-01-18 8 views
3

私はAngular 2プロジェクトでプログラミングしています。私は、同じ対話の確認ボックスを使用するいくつかのコンポーネントを持っています。したがって、私は確認コードを別のクラスに入れました。ダイアログボックスは、ユーザーがデータの継続または保存を望んでいるかどうかを確認するためのものです。Angular2-modal確認コールバック

私はこのポーズにAngular2-modalを使用しています。

確認のいずれかのボタンを押すと、この確認を呼び出したコンポーネントにこの回答を返すことができますので、そこで特定の操作を実行できます。

私のコードは次のようになります。

this._popup.confirmSaveTemp(this.modal); 

これは、確認コードを持つ関数です:

これは私が私のコンポーネントから呼び出す機能です。現在、私は "TODO"を置いた2つの場所で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 
     }); 
    }); 
    } 

*質問:どのように私はこの対話の応答があるOR「親」コンポーネントから機能を呼び出すことができますどのようにどのような「親」コンポーネントに通知することができますか? *

答えて

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); 
    } 
関連する問題