BehaviorSubject 的问题：第二个组件在更新状态后收到 null

Question

我正在使用 Angular 中的一项服务，该服务使用BehaviourSubject 在两个组件之间共享业务对象。第一个组件正确更新值，但第二个组件在订阅BehaviorSubject时始终打印 null。

服务代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Business } from '../_models/business';

@Injectable({
  providedIn: 'root',
})
export class SharedBusinessStateService {
  private businessSubject = new BehaviorSubject<Business | null>(null);
  business$ = this.businessSubject.asObservable();

  constructor() {}

  updateBusiness(business: Business) {
    this.businessSubject.next(business);
    this.logCurrentState();
  }

  logCurrentState() {
    console.log("From Service: " + JSON.stringify(this.businessSubject.value));
  }
}

第一个组件代码：

onSubmit(formData: any) {
  let business = new Business();
  business.owner = this.businessOwner()!;
  this.sharedBusinessState.updateBusiness(business);
}

第二个组件代码：

ngOnInit() {
  this.sharedBusinessState.business$.subscribe((data) => {
    console.log("Business Data in Component: " + JSON.stringify(data));
  });

  // Method to check the current state
  this.sharedBusinessState.logCurrentState();
}

logCurrentState(){
 this.sharedBusinessState.logCurrentState();
}

行为： 当我从第一个组件调用 updateBusiness 方法时，我可以看到服务中的状态正确更新。然而，在第二个组件中，对business$的订阅始终打印null。我尝试从界面中的按钮调用 logCurrentState() 方法，但它也打印 null。

问题： 为什么第二个组件在订阅business$时总是收到null，即使第一个组件正确更新了值？我是否应该检查某些内容以确保两个组件都使用相同的服务实例并接收更新的值？

Answer 1

检查您是否已将

SharedBusinessStateService

添加到应用程序中的任何

providers

数组，如果您添加了该服务，则会创建一个新实例，并且这些新实例不知道来自其他服务的排放。

---

第二个组件，日志函数

log

应该放在subscribe里面，因为subscribe里面的代码是异步代码，外面的代码是同步的，javascript先执行同步代码，然后执行异步代码。

ngOnInit() {
  this.sharedBusinessState.business$.subscribe((data) => {
    console.log("Business Data in Component: " + JSON.stringify(data));
    // Method to check the current state
    this.sharedBusinessState.logCurrentState();  // <- changed here!
  });    
}

logCurrentState(){
 this.sharedBusinessState.logCurrentState();
}