事件發射器從引導模態到父節點

我想將模態事件從模態組件傳遞到模態的父組件，但出於某種原因，我似乎無法使EventEmitter正常工作。如果有人有一個想法，將不勝感激。主要的代碼如下，（非工作）普拉克從NG-引導演示分叉是在這裏：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'; 
    } 
}

來源

2017-03-08 Neph

選中此選項[**答案**]（http://stackoverflow.com/questions/42460418/angular-2-ng2-bootstrap-modal-inside-child-component-called-from-parent-componen/42463516＃42463516） – Aravind

更新答案：

終於讓我找到解決您的問題。我不確定您是否仔細研究了在ng-bootstrap網站上爲modal component提供的所有示例。

您需要使用內容組件中的activeModal.close（）方法返回結果。這個值將在模態組件中找到，然後你可以做任何你想做的事情。我已經創建了一個working Plunker，這基本上是正式普及的分叉，它的作用就像魅力。

老答案：

我想你已經把事件處理在錯誤的地點的代碼，這就是爲什麼你沒有得到事件通知。

下面是app.ts工作模板

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

還修改模態，component.ts通知功能的代碼

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

我已付出和修改你的普拉克使它working here

來源

2017-03-09 00:38:45

我看到你要去哪裏，但是我遇到的麻煩是在模態的父項中冒泡getNotification（）。一個簡單的例子可能是，如果父母有一個表格，對話是一個Clear-Form yes或no。這似乎是一個簡單的事情做幾個小時前.. – Neph

@Neph我覺得這很容易，但你只需要嘗試多一點。請檢查我的更新答案，它給出了Modal Compnent和Modal Component的父級結果。 –

這是你的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...'); 
 
    } 
 
}

來源

2017-03-08 22:22:32

事件發射器從引導模態到父節點

回答

相關問題