事件发射器从引导模态到父节点

我想将模态事件从模态组件传递到模态的父组件，但出于某种原因，我似乎无法使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

事件发射器从引导模态到父节点

回答

相关问题