Angular同级组件传值异常：使用Service始终返回初始值0

问题原因分析 #

• Service事件发射错误：在changeNumber方法中，emit传递的是this.getCurrentNumber（函数引用），而非调用函数后的返回值this.getCurrentNumber()，导致组件B订阅到的是函数而非实际数值。
• 组件B变量未定义：组件B中定义的变量是num，但订阅回调里使用的是未声明的selectedNum，会引发运行时错误，中断后续逻辑。
• 组件初始化顺序问题：如果组件B的ngOnInit先于组件A执行，组件B订阅事件时，组件A还未触发changeNumber，此时调用getCurrentNumber()只能拿到初始值0。

修复后的Service代码 #

@Injectable({
  providedIn: 'root',
})
export class EventService {
  constructor() {}
 
  public editNumber: number = 0;
  // 推荐用Subject替代EventEmitter（EventEmitter主要用于组件@Output场景）
  updatedEditNumber = new Subject<number>();

  changeNumber(num: number) {
    this.editNumber = num;
    // 发射实际数值，也可直接传num
    this.updatedEditNumber.next(this.getCurrentNumber());
  }

  getCurrentNumber() {
    return this.editNumber;
  }
}

修复后的组件A代码 #

export class ShowCompnents implements OnInit{
    numberAttendee: number;

    constructor(public eventService: EventService){}

    ngOnInit(): void {
      this.numberAttendee = 8;
      this.eventService.changeNumber(this.numberAttendee);
    }
}

修复后的组件B代码 #

export class ShareComponents implements OnInit, OnDestroy{
    num: number;
    private subscription: Subscription;

    constructor(public eventService: EventService){}

    ngOnInit(): void {
      // 先主动获取当前值，规避初始化顺序问题
      this.num = this.eventService.getCurrentNumber();
      console.log('初始值:', this.num);
      
      this.subscription = this.eventService.updatedEditNumber.subscribe((data: number) => {
        this.num = data; // 直接使用订阅到的数值
        console.log('更新后的值:', this.num);
      });
    }

    ngOnDestroy(): void {
      // 取消订阅，防止内存泄漏
      this.subscription?.unsubscribe();
    }
}

额外说明 #

1. 用Subject替代EventEmitter：Angular官方建议Service中使用RxJS的Subject传递数据，EventEmitter专为组件@Output设计。
2. 处理初始化顺序：组件B初始化时主动拉取当前值，避免因加载顺序导致的事件遗漏。
3. 取消订阅：组件销毁时取消订阅，防止内存泄漏。

内容的提问来源于stack exchange，提问作者A.Baes