Angular兄弟组件方法调用问题：服务通信事件未触发

你遇到的核心问题是服务中错误地使用了@Output()装饰器和EventEmitter，这是Angular组件间通信的常见误区之一。让我帮你拆解问题并修复：

为什么当前代码不工作？ #

1. @Output()仅适用于组件/指令：@Output()装饰器是Angular用来标记组件向父组件暴露输出事件的，它在服务中没有任何作用，服务里的@Output()会被直接忽略，导致你的change事件无法正确被订阅。
2. 服务中不推荐使用EventEmitter：虽然EventEmitter继承自RxJS的Subject，但Angular官方明确建议仅在组件输出场景中使用它，服务里应该用标准的RxJS可观察对象（比如Subject或BehaviorSubject）来实现事件发布订阅。
3. 潜在的单例问题：如果你的服务不是单例（比如在每个组件的providers数组中都声明了），Header和Body组件会拿到不同的服务实例，自然无法接收到对方发出的事件。

修复步骤 #

1. 重构PlanningService #

把服务中的@Output()和EventEmitter替换为RxJS的Subject（如果需要初始值可以用BehaviorSubject），同时确保服务是单例：

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

@Injectable({
  providedIn: 'root' // 确保服务是单例，这是跨组件通信的关键！
})
export class PlanningService {
  // 用Subject封装事件流，外部只能订阅不能直接修改
  private changeSubject = new Subject<any>();
  change$ = this.changeSubject.asObservable();

  changeOccured(value: any) {
    this.changeSubject.next(value); // 发出事件
  }

  // 保留你的其他服务方法
  getProductMapData(name: string) { /* 原实现代码 */ }
  getAllPlans(id: any, flag: boolean) { /* 原实现代码 */ }
}

2. 调整Header组件的事件触发代码 #

这部分逻辑本身没问题，只要确保调用服务的changeOccured方法即可：

onChange(value: any) {
  this.planningService.changeOccured(value);
}

3. 修改Body组件的订阅逻辑 #

订阅服务暴露的change$可观察对象，同时记得在组件销毁时取消订阅，避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { PlanningService } from './path-to-planning-service';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html'
})
export class BodyComponent implements OnInit, OnDestroy {
  private changeSubscription!: Subscription;

  // 你的组件变量
  aaa = false;
  bbb = false;
  isSearchScreen = true;
  isPlanListScreen = false;
  isCreateScreen = false;
  myPlan = { moleculeId: '' };
  selectedCombination!: any;
  strengthANdPacks: any[] = [];
  allPlans: any[] = [];

  constructor(private planningService: PlanningService) {}

  ngOnInit() {
    // 订阅服务的事件流
    this.changeSubscription = this.planningService.change$.subscribe(value => {
      console.log('change occured');
      this.onChange(value);
    });
  }

  onChange(value: any) {
    this.isSearchScreen = false;
    this.isPlanListScreen = true;
    this.isCreateScreen = false;
    console.log('value', value);
    this.myPlan.moleculeId = value.id;
    this.selectedCombination = new SelectedCombination(value.brand, value.name);
    
    this.planningService.getProductMapData(value.name).subscribe((data) => {
      this.strengthANdPacks = data;
    }, (error) => {
      console.log(error);
    });
    
    this.planningService.getAllPlans(value.id, false).subscribe((data) => {
      this.allPlans = data;
    }, (error) => {
      console.log(error);
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    if (this.changeSubscription) {
      this.changeSubscription.unsubscribe();
    }
  }
}

4. 确认服务的单例性 #

确保你的PlanningService是单例：

• 优先使用@Injectable({ providedIn: 'root' })（代码中已添加）
• 不要在Header或Body组件的providers数组中声明该服务，否则会创建新的实例，导致通信失败。

额外优化建议 #

• 避免在组件中嵌套订阅（比如onChange方法里的两个请求订阅），可以用RxJS的forkJoin或switchMap等操作符合并请求，提升代码可读性和性能。
• 如果需要组件初始化时就接收最新的事件，可以用BehaviorSubject代替Subject，它会保存最新的值，新订阅者会立即收到这个值。

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