从 bootstrap 模式到父级的事件发射器

Question

我想将模态事件从模态组件传递到模态的父组件，但出于某种原因，我似乎无法让 EventEmitter 工作。如果有人有想法，将不胜感激。主要代码如下，从 ng-bootstrap 演示派生的（非工作）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

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

Answer 2

更新的答案：

我终于找到了解决您问题的方法。我不确定您是否仔细研究了 ng-bootstrap 网站上为 modal component 提供的所有示例。

您需要使用内容组件中的 activeModal.close() 方法 return 结果。该值将在 Modal Component 中获取，然后您可以用它做任何您想做的事情。我创建了一个 working Plunker ，它基本上是官方 plunk 的分支，它就像魅力一样。

旧答案：

我认为您将事件处理代码放在了错误的位置，这就是您收不到事件通知的原因。

下面是 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 并修改了你的 plunk 以使其工作 here

Answer 3

在 angular 7 中接受的答案无效。所以我找到了新的解决方案。它与那里类似但有一点变化。

子组件的打字稿文件中不应更改任何内容。您需要为 @output 和 emit 函数编写常规代码。但是您需要对父类型脚本文件进行一些更改。下面的代码正在为我收集事件和数据。

open() {
  const modalRef = this.modalService.open(NgbdModalContent);
  // componentInstace didnot work here for me
  // modalRef.componentInstance.name = 'World';
  modalRef.content.notifyParent.subscribe((result)=>{
       console.log(result);   
  })
}

Answer 4

我在 Angular 7，我在 parent 中处理和处理来自 child 的事件的方式与 @Veshraj Joshi 所做的一样。如下：

`modalRef.componentInstance.notifyParent.subscribe(result => {
  console.log(result);
});`

从 bootstrap 模式到父级的事件发射器

Event emitter from bootstrap modal to parent

ng-bootstrap

angular