EventEmitter от загрузочного модального компонента к родительскому

Я использую ng-bootstrap с Angular 4, конкретный вариант использования - модальный с "Компонент как контент" (второй сценарий из 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 и зарегистрировал его на консоли. Где я могу поместить его в код выше?

Я знаю, что здесь очень похожий вопрос: эмитент событий от bootstrap modal до parent, но я думаю, что это все еще очень другой сценарий реализации, так как я открываю модально непосредственно как компонент здесь.

Очевидно, я предпочел бы некоторые простые решения, в которых мне не нужно входить в код для самого modalService...

Ответ 1