イベントエミッタがブートストラップモーダルから親に

Question

モーダルコンポーネントからモーダルの親コンポーネントにモーダルイベントを渡したいのですが、何らかの理由でEventEmitterを動作させることができません。誰かがアイデアを持っていれば、それは非常に感謝します。メインコードは、以下の（非稼働）でNG-ブートストラップデモからフォークplunkここにある：http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview

app.ts

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="container-fluid" (notifyParent)="getNotification($event)"> 
    <template ngbModalContainer></template> 
    <ngbd-modal-component ></ngbd-modal-component> 
    </div> 
    ` 
}) 
export class App { 
     getNotification(evt) { 
     console.log('Message received...'); 
    } 
} 

モーダルcomponent.ts

import {Component, Input, Output, EventEmitter} from '@angular/core'; 

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'ngbd-modal-content', 
    template: ` 
    <div class="modal-body"> 
     <p>Hello, {{name}}!</p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button> 
     <button type="button" class="btn btn-secondary" (click)="notify()">Notify</button> 
    </div> 
    ` 
}) 
export class NgbdModalContent { 
    @Input() name; 
    @Output() notifyParent: EventEmitter<any> = new EventEmitter(); 
    constructor(public activeModal: NgbActiveModal) {} 

     notify(){ 
     console.log('Notify clicked...'); 
     this.notifyParent.emit('Here is an Emit from the Child...'); 
    } 
} 

@Component({ 
    selector: 'ngbd-modal-component', 
    templateUrl: 'src/modal-component.html' 
}) 
export class NgbdModalComponent { 
    constructor(private modalService: NgbModal) {} 

    open() { 
    const modalRef = this.modalService.open(NgbdModalContent); 
    modalRef.componentInstance.name = 'World'; 
    } 
} 

Answer 1

更新答え：

最後に、私はあなたの問題への解決策を見つけました。 ng-bootstrapウェブサイトでmodal componentの例を慎重に検討したかどうかはわかりません。

コンテンツコンポーネントからactiveModal.close（）メソッドを使用して結果を返す必要があります。その値はModal Componentで取得され、それを使って何でもしたいことができます。私はworking Plunkerを作成しました。これは基本的に正式な塊のフォークであり、魅力のように機能します。

旧答え：

私はあなたが間違った場所でのイベント処理コードを入れていると思うし、あなたがイベントの通知を取得しない理由です。以下は

app.ts

template: ` 
    <div class="container-fluid"> 
    <template ngbModalContainer></template> 
    <ngbd-modal-component (notifyParent)="getNotification($event)"></ngbd-modal-component> 
    </div> 
    ` 

取り組んテンプレートはまた、私はフォークとそれを作るためにあなたのplunkを変更した

notify(){ 
    console.log('Notify clicked...'); 
    this.notifyParent.emit('Here is an Emit from the Child...'); 
    this.activeModal.close('Notify click'); 
} 

にモーダルcomponent.tsに機能を通知するコードを変更していますhere

Answer 2

これはあなたのapp.tsはどうあるべきかです：

@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <div class="container-fluid"> 
 
     <template ngbModalContainer></template> 
 
     <ngbd-modal-component> 
 
      <ngbd-modal-content [name]="modal Title" (notifyParent)="getNotification($event)"></ngbd-modal-content> 
 
     </ngbd-modal-component> 
 
    </div> 
 
    ` 
 
}) 
 
export class App { 
 
     getNotification(event) { 
 
     console.log('Message received...'); 
 
    } 
 
}