如何在 Angular 的不同组件中使用注入服务的相同实例？

Question

I'm currently trying to access the real-time value of a variable in a service from different components.

In my service I have:

export class ServiceA {
  serviceVar = "hello";

  constructor(private httpClient: HttpClient) {
  }

  getServiceVar(){
    return this.serviceVar
  }

  setServiceVar(newVar){
    this.serviceVar = newVar;
  }

in Component AI have:

export class ComponentA implements OnInit {
  constructor(private service: ServiceA) {}

  setVar() {
    this.service.setServiceVar("new value from A")
  }

  getVar(){
    console.log(this.service.getServiceVar())
  }
}

in Component BI have:

export class ComponentB implements OnInit {
  constructor(private service: ServiceA) {}

  setVar() {
    this.service.setServiceVar("new value from B")
  }

  getVar(){
    console.log(this.service.getServiceVar())
  }

}

in app.module.ts

providers: [ServiceA]

If I set the variable in ComponentA, I would like ServiceA's variable to be updated in a way so that if ComponentB tries to get() that value, it receives the value that ComponentA updated the service with. Essentially having ComponentA and ComponentB using the same instance of the service.

Right now what is happening is that there are 2 instances of ServiceA, and when ComponentA runs setVar(), the change is only applied to ComponentA's instance of the service and not to the ComponentB's instance of the service.

Answer 1

I can see your code is completely correct as you have registered the service app.module.ts. So, there will be a singleton instance of service.

The only thing that you need to correct is service class where you need to add property called spreadsheetID. strong text

export class ServiceA {
  serviceVar = "hello";
  spreadsheetID

  constructor(private httpClient: HttpClient) {
  }

  getServiceVar(){
    return this.spreadsheetID
  }

  setServiceVar(newSpread){
    this.spreadsheetID = newSpread;
  }

Answer 2

The answer is to make your Service a provider just as I did in my question...BUT also make sure you remove

@Injectable({
  providedIn: 'root'
})

and change it to just:

@Injectable()

at the top of your service :)