如何从子零部件向父零部件传递数据[Angular]

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

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

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

@Component({
  selector: 'app-child',
  template: `
    <p>{{ data }}</p>
  `
})
export class ChildComponent {
  @Input() data: string;
}

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (dataEvent)="handleData($event)"></app-child>
  `
})
export class ParentComponent {
  handleData(data: string) {
    console.log(data); // 处理子组件传递的数据
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendData()">Send Data</button>
  `
})
export class ChildComponent {
  @Output() dataEvent: EventEmitter<string> = new EventEmitter<string>();

  sendData() {
    const data: string = 'Hello from child';
    this.dataEvent.emit(data); // 触发事件，传递数据给父组件
  }
}

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class DataService {
  private dataSubject: Subject<string> = new Subject<string>();
  data$ = this.dataSubject.asObservable();

  sendData(data: string) {
    this.dataSubject.next(data); // 发送数据给订阅者
  }
}

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  template: `
    <p>{{ data }}</p>
  `
})
export class ParentComponent implements OnDestroy {
  data: string;
  private subscription: Subscription;

  constructor(private dataService: DataService) {
    this.subscription = this.dataService.data$.subscribe(data => {
      this.data = data; // 接收子组件传递的数据
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe(); // 取消订阅，避免内存泄漏
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendData()">Send Data</button>
  `,
  providers: [DataService] // 在子组件中提供共享服务的实例
})
export class ChildComponent {
  constructor(private dataService: DataService) {}

  sendData() {
    const data: string = 'Hello from child';
    this.dataService.sendData(data); // 通过共享服务发送数据给父组件
  }
}