从引导模式组件到父级的事件发射器

Question

我在 Angular 4 中使用 ng-bootstrap，具体用例是带有"组件即内容"的模态(https://ng-bootstrap.github.io/#/components/modal/examples 年的第二个场景(。

我想从孩子向父母发出一些数据。为此，我从示例中创建了一个非工作 plunk：

modal.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-header">
<h4 class="modal-title">Hi there!</h4>
</div>
<div class="modal-body">
<p>Hello!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="testclick('teststring')">Testclick</button>
</div>
`
})
export class NgbdModalContent {
@Output() clickevent = new EventEmitter<string>();
constructor(public activeModal: NgbActiveModal) {}

testclick(teststring: string) {
this.clickevent.emit(teststring);
}
}
@Component({
selector: 'ngbd-modal-component',
templateUrl: 'src/modal-component.html'
})
export class NgbdModalComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(NgbdModalContent);
}
}

modal.component.html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

如您所见，我只将 EventEmitter 添加到 NgbdModalContent 组件中。我想要的是 NgbdModalComponent 接收testclick事件并将其记录到控制台。我可以把它放在上面的代码中的什么地方？

我知道这里有一个非常相似的问题 从引导模态到父级的事件发射器，但我认为这仍然是一个非常不同的实现方案，因为我在这里直接将模态作为组件打开。

显然，我更喜欢一些简单的解决方案，我不必为modalService本身进入代码......

Answer 1

这实际上非常简单，因为您可以直接订阅作为模态内容打开的组件的@Output事件：

export class NgbdModalComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
modalRef.componentInstance.clickevent.subscribe(($e) => {
console.log($e);
})
}
}

这是一个工作 plunker： http://plnkr.co/edit/rMJ7qfSSLK0oHspIJbDB?p=preview

旁注：我不确定您的确切用例是什么，但从引导模式到父级的事件发射器的答案显示了模式打开器和用作模态内容的组件之间的首选通信方法。