2017-04-25 11 views
4

私はアプリケーション全体で使用されるngbmodalを使用して一般的な確認ボックスを作成しようとしています。この場合、タイトルとメッセージは呼び出し側コンポーネントからモーダルに渡されます。私はDialogServiceとして作成し、entryComponentsに追加しました。これで確認ボックスを表示することができました。しかし、結果を得ることができません。以下は、ConfirmationBoxコンポーネントを表示するためのコードです。それから値を取得する方法一般的なConfrimation BoxとしてngbModal

const modalRef = this.modalService.open(ConfirmationBoxComponent,{backdrop:"static"}) 
    modalRef.componentInstance.name = "Message"; 
    modalRef.componentInstance.confirmationBoxTitle = "Confirmation?" 
    modalRef.componentInstance.confirmationmessage = "Do you want to cancel?" 
    modalRef.componentInstance.changeRef.markForCheck(); 

答えて

1

あり、これを達成するための多くの簡単な方法がありますが、私はIMO最も簡単で最も効果的である1を示唆している:ユーザーの選択とモーダルのresult約束を解決します。これは、モーダルのコンテンツ(予告activeModal.close(...))を表すコンポーネントで、次のことのように簡単です:

open() { 
    const modalRef = this.modalService.open(NgbdModalContent); 
    modalRef.componentInstance.confirmationBoxTitle = 'Confirmation?'; 
    modalRef.componentInstance.confirmationMessage = 'Do you want to cancel?'; 

    modalRef.result.then((userResponse) => { 
     console.log(`User's choice: ${userResponse}`) 
    });   
    } 

<button (click)="activeModal.close(true)">Yes</button> 
<button (click)="activeModal.close(false)">No</button> 

その後、あなたはNgbModalRef(予告modalRef.result.then)のresult約束からユーザーの答えを取り戻すことができます

これはすべて、次のプランナーで実際に動作しています。http://plnkr.co/edit/yYIx1m1e2nfK0nxFwYLJ?p=preview

+0

ありがとうございました。 – Vairavan

関連する問題