Angular 6-子(内部)组件发出EventEmitter并等待父组件返回响应

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notifyParent()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() parentEvent = new EventEmitter<string>();

  notifyParent() {
    this.parentEvent.emit('Hello from child!');
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child (parentEvent)="handleChildEvent($event)"></app-child>
    <p>Response from child: {{ response }}</p>
  `
})
export class ParentComponent {
  response: string;

  handleChildEvent(data: string) {
    this.response = data;
    // 这里可以进行其他逻辑处理
  }
}

// 子组件中添加调试信息
notifyParent() {
  console.log('Emitting event from child');
  this.parentEvent.emit('Hello from child!');
}