angular - 从 bootstrap 模态到父级的事件发射器

我想将模态事件从模态组件传递到模态的父组件，但是由于某些原因，我似乎无法使EventEmitter正常工作。如果有人有想法，将不胜感激。下面是主要代码，从ng-bootstrap演示中 fork 出来的(无效的)插件在这里:http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview

应用程序

@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...');
    }
}

模态分量

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';
  }
}

最佳答案

更新了答案:

最后，我找到了解决您问题的方法。我不确定您是否已经仔细研究了ng-bootstrap网站上针对modal component给出的所有示例。

您需要使用内容组件中的activeModal.close()方法返回结果。该值将在“模态组件”中拾取，然后您可以执行任何您想使用的值。我创建了一个working Plunker，它基本上是官方小酒杯的 fork ，它的工作原理就像魅力。

旧答案:

我认为您将事件处理代码放在错误的位置，这就是为什么您没有得到事件通知的原因。

以下是app.ts上的工作模板

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

还在modal-component.ts中将Notify函数的代码修改为

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

我已经 fork 并修改了您的插件，使其可以工作here

关于angular - 从 bootstrap 模态到父级的事件发射器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42681556/