Angular 6-声明彼此具有多个模块的两个组件

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [data]="parentData" (event)="handleEvent($event)"></app-child>
  `
})
export class ParentComponent {
  parentData: string = 'Hello from parent';

  handleEvent(event: string) {
    console.log('Event received from child:', event);
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>Data from parent: {{ data }}</p>
    <button (click)="sendEvent()">Send Event to Parent</button>
  `
})
export class ChildComponent {
  @Input() data: string;
  @Output() event: EventEmitter<string> = new EventEmitter();

  sendEvent() {
    this.event.emit('Hello from child');
  }
}