Angular 5中Subject<any>无法接收兄弟组件更新后的最新服务数据

看起来你遇到了Angular组件间通过Subject传递数据时的常见问题——特定组件无法响应数据更新。既然你已经确认数据能正确到达服务，那咱们从最可能的原因开始排查：

1. 服务是否为全局单例？ #

这是最常见的问题根源：如果Service不是单例，那么three.component.ts使用的服务实例会和Edit.component.ts以及其他组件的实例不一样，Subject自然无法在不同实例间共享数据。

排查与修复： #

• 打开你的Service.ts，确保@Injectable装饰器配置了providedIn: 'root'，这会让服务成为全局单例：

  @Injectable({
    providedIn: 'root' // 关键配置：确保服务全局唯一
  })
  export class Service {
    formDataSource = new Subject<any>();
    formData = this.formDataSource.asObservable();
  
    formUpdate(data: any){
      this.formDataSource.next(data);
    }
  }
  

• 检查three.component.ts的@Component装饰器，删除任何包含Service的providers数组——如果组件自己声明了服务提供者，会创建一个新的服务实例，打破单例：

  @Component({
    selector: 'app-three',
    templateUrl: './three.component.html',
    styleUrls: ['./three.component.css'],
    // ❌ 移除这行：providers: [Service]
  })
  export class ThreeComponent implements OnInit {
    // ...你的代码
  }
  

• 同理，如果three.component.ts所在的懒加载模块中声明了Service在providers里，也要删除这一配置。

2. 是否需要用BehaviorSubject替代Subject？ #

Subject的特性是只给订阅者发送订阅之后的新数据，如果three.component.ts先发送了数据，而Edit.component.ts之后才订阅，就会错过之前的数据。如果你的场景需要订阅者能立即获取最新的历史数据，可以改用BehaviorSubject：

修改Service.ts： #

import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class Service {
  // 初始化时传入一个默认值（比如null或空对象）
  formDataSource = new BehaviorSubject<any>(null);
  formData = this.formDataSource.asObservable();

  formUpdate(data: any){
    this.formDataSource.next(data);
  }
}

3. 检查组件生命周期与初始化状态 #

确保three.component.ts的ngOnInit方法正常执行：比如组件是否被ngIf等指令隐藏导致未初始化，或者是否在懒加载模块中未正确加载。你可以在ngOnInit里加个console.log验证：

ngOnInit() {
  console.log('Three component initialized');
  this.updateFormData();
}

按照以上步骤排查后，应该就能解决three.component.ts无法正常参与数据传递的问题了。

内容的提问来源于stack exchange，提问作者Moovendra Dhinesh babu