Angular中如何实现子组件到父组件再到另一子组件的事件传递？

• 使用强类型替代any，保证类型安全
  避免使用EventEmitter<any>这类模糊类型，定义具体的数据接口，能在编译阶段发现类型错误，大幅提升代码可维护性。
  示例：

  // 定义表单数据接口
  export interface FormData {
    username: string;
    email: string;
    // 根据实际表单字段补充
  }
  
  export class FormChildComponent {
    // 用具体类型替代any
    @Output() doSomethingWithData: EventEmitter<FormData> = new EventEmitter<FormData>();
  
    getDataFromForm() {
      // 假设form是表单实例，输出值匹配FormData类型
      this.doSomethingWithData.emit(form.value);
    }
  }
  

• 父组件作为数据协调者，通过@Input传递处理后的数据
  父组件接收子组件的事件、处理数据后，将结果通过@Input传递给目标子组件，严格遵循Angular单向数据流原则，避免组件间直接耦合。
  修改父组件代码：

  // parent.component.ts
  export class ParentComponent {
    processedFormData: FormData | null = null;
  
    processData(rawData: FormData) {
      // 执行数据处理逻辑，比如格式化、验证、补全字段
      this.processedFormData = this.transformRawData(rawData);
    }
  
    private transformRawData(data: FormData): FormData {
      return {
        ...data,
        username: data.username.toUpperCase()
        // 其他处理规则
      };
    }
  }
  

  父组件模板传递数据给目标子组件：

  <!-- 触发数据传递的表单子组件 -->
  <form-child-component (doSomethingWithData)="processData($event)"></form-child-component>
  
  <!-- 接收处理后数据的子组件 -->
  <form-child-component [processedData]="processedFormData"></form-child-component>
  

• 子组件通过监听@Input变化触发渲染逻辑
  不要让父组件直接调用子组件的renderSomething方法，而是通过@Input接收数据，用属性setter或ngOnChanges钩子监听数据变化，自动触发渲染，保持组件的独立性和封装性。
  修改子组件代码：

  export class FormChildComponent {
    @Output() doSomethingWithData: EventEmitter<FormData> = new EventEmitter<FormData>();
    // 新增输入属性接收处理后的数据
    @Input() set processedData(data: FormData | null) {
      if (data) {
        this.renderSomething(data);
      }
    }
  
    getDataFromForm() {
      this.doSomethingWithData.emit(form.value);
    }
  
    renderSomething(data: FormData) {
      // 基于处理后的数据执行渲染逻辑
      console.log('渲染内容:', data);
    }
  }
  

• 避免直接调用子组件实例方法
  不要通过@ViewChild获取子组件实例后直接调用renderSomething，这种方式会让父组件与子组件紧耦合，一旦子组件方法名或逻辑变更，父组件必须同步修改，维护成本极高。

• 复杂场景下用服务管理共享状态
  如果多个组件需要共享处理后的数据，或者组件层级较深，建议创建专门的状态服务，用RxJS的BehaviorSubject存储和分发数据，子组件订阅服务数据流即可。
  示例服务：

  import { Injectable } from '@angular/core';
  import { BehaviorSubject, Observable } from 'rxjs';
  import { FormData } from './form-data.interface';
  
  @Injectable({ providedIn: 'root' })
  export class FormDataService {
    private processedDataSubject = new BehaviorSubject<FormData | null>(null);
    processedData$: Observable<FormData | null> = this.processedDataSubject.asObservable();
  
    updateProcessedData(data: FormData) {
      this.processedDataSubject.next(data);
    }
  }
  

  父组件处理数据后更新服务：

  export class ParentComponent {
    constructor(private formDataService: FormDataService) {}
  
    processData(rawData: FormData) {
      const processedData = this.transformRawData(rawData);
      this.formDataService.updateProcessedData(processedData);
    }
  }
  

  子组件订阅服务数据触发渲染：

  export class FormChildComponent {
    constructor(private formDataService: FormDataService) {}
  
    ngOnInit() {
      this.formDataService.processedData$.subscribe(data => {
        if (data) {
          this.renderSomething(data);
        }
      });
    }
  
    // ...其他代码
  }
  

内容的提问来源于stack exchange，提问作者HalcyonsGlory