Angular兄弟组件间数据传递问题：子组件接收数据为undefined

核心错误：输入属性绑定方式错误 #

你在父组件模板里给child-one的employees用了事件绑定语法(employees)，但child-one里的employees是@Input输入属性，必须用属性绑定语法[employees]来传递数据。

修正后的代码 #

parent.component.html

<child-one [employees]="employeesFromChild"></child-one>
<child-two (outputFromChild)="getEmployees($event)"></child-two>

额外优化：处理数据异步加载的情况 #

即使修正了绑定，child-one的ngOnInit执行时，child-two的ngOnInit可能还没完成数据emit（Angular组件初始化顺序不保证兄弟组件的执行顺序），导致打印undefined。可以通过以下两种方式解决：

1. 使用ngOnChanges钩子监听输入属性变化
   修改child-one.component.ts：

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

@Component({
  selector: 'child-one',
  templateUrl: './child-one.component.html'
})
export class ChildOneComponent implements OnChanges {
  @Input() employees!: Employee[];

  ngOnChanges(changes: SimpleChanges): void {
    // 当employees属性变化时触发
    if (changes['employees']) {
      console.log(this.employees);
    }
  }
}

2. 用Observable+异步管道处理（可选）
   如果把父组件的数据改成Observable类型，可通过异步管道自动处理数据加载：

• parent.component.ts

import { Subject } from 'rxjs';

employeesFromChild$ = new Subject<Employee[]>();

getEmployees(event: Employee[]){
  this.employeesFromChild$.next(event);
}

• parent.component.html

<child-one [employees]="employeesFromChild$ | async"></child-one>

总结 #

先修正父组件的属性绑定语法，再根据数据加载时机选择合适的钩子或异步处理方式，就能解决undefined的问题。

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