如何在 Angular 中实现子组件向父组件传递数据并调用其方法？

在 Angular 中，子组件可以通过属性绑定 (binding) 和事件发射 (emitting) 的方式向父组件传递数据并调用方法。以下是基本步骤：

1. **属性绑定**（简单数据传递）：
- 在子组件的模板中，使用 `[(ngModel)]` 或 `@Input()` 将数据从子组件传给父组件：

     <parent-component [data]="childData"></parent-component>

- 子组件需要提供 `@Output()` 定义一个事件，如 `dataChanged = new EventEmitter<any>();`

   export class ChildComponent {
     @Output() dataChanged = new EventEmitter();
     childData = "Hello from child";
     
     sendData() {
       this.dataChanged.emit(this.childData);
     }
   }

父组件需要接收这个数据：

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

   @Component({
     selector: 'parent-component',
     template: `<div>{{ receivedData }}</div>`
   })
   export class ParentComponent {
     @Input() data: any;
     receivedData: string;

     ngOnChanges() {
        this.receivedData = this.data;
      }
   }

当子组件触发 `sendData()` 时，会更新父组件的数据。

2. **事件发射（复杂数据传递或方法调用）**：
- 子组件发射自定义事件，传递对象或方法名：

     emitEvent(event: CustomEvent) {
       this.eventEmitter.emit(event);
     }

- 父组件监听并处理这个事件：

     @ViewChild(ChildComponent) childComponent: ChildComponent;
     eventEmitter = new EventEmitter<CustomEvent>();

     handleEvent(event: CustomEvent) {
         // 处理事件...
     }

     ngAfterViewInit() {
         this.childComponent.dataChanged.subscribe(event => {
             this.handleEvent(event);
         });
     }