3

NGX-ブートストラップIは、NGX-ブートストラップモーダルを使用しています使用して、私は、私はどこにこの方法を使用できるように、このは「yes」または「no」モーダル

confirmDialog(message: string, note: string, onOk, onCancel) { 
    // modal open 
    // on click onOk button some action perform 
    // on click onCancel button some action perform 
} 

のようなものを使用したいです私は両方のアクションを実行したい。これは可能ですか?

+0

を表示するコンポーネントに

マイ削除モーダルTS

import { Component, Input, Output, EventEmitter } from '@angular/core'; import { BsModalRef } from "ngx-bootstrap"; @Component({ selector: 'delete-modal', templateUrl: './delete.modal.component.html'}) export class DeleteModalComponent { @Input() modalRef: BsModalRef; @Output() deleteEvent = new EventEmitter(); constructor() { } delete(): void { this.deleteEvent.emit(); } } 

マイ削除モーダルHTML

<div class="modal-header"> <h3 class="modal-title pull-left">Confirm Delete</h3> </div> <div class="modal-body"> <p>Do you really want to delete item?</p> <div class="pull-right"> <a class="btn btn-primary" role="button" (click)="delete()">Ok</a> <a class="btn btn-default" role="button" (click)="modalRef.hide()">Cancel</a> </div> <div class="clearfix"></div> </div> 

どのような状況下では、私かもしれない[お読みください速い回答を得るために、「緊急」や他の類似のフレーズを私の質問に追加してください。](// meta.stackoverflow.com/q/326569) - 要約は、これはボランティアに対処する理想的な方法ではなく、おそらく回答を得ることに逆効果があるということです。これをあなたの質問に追加しないでください。 – halfer

答えて

1

私は、削除モーダルにngx-bootstrap modalを使用しています。それを機能させるには、親との間で借り換えを渡すために@Inputと@Outputを使用する必要があります。以下の例は、あなたのニーズを満たすように簡単に修正することができます。子供から親に値を渡す必要がある場合は、イベントエミッタでタイプをEventEmitter< any >のように変更し、テンプレート上で(deleteEvent)="delete($event)"に変更します。emitパスでは、イベントthis.deleteEvent.emit(true);を送信してください。私は、ダイアログ

/*add a template somewhere*/ 
<ng-template #delete> 
    <delete-modal [modalRef]="modalRef" (deleteEvent)="delete()"></delete-modal> 
</ng-template> 
関連する問題