Angular Service 变量未在组件中更新

Question

I have a boolean variable in a service that is updated in function. I want to use this variable change in the component, but the service variable is not updating in the component.

service.ts

isUpdating: boolean;
updateTheVairable() {
     this.isUpdating = true;
}

component.ts

methodRequiringUpdateFromService() {
    if(this.service.isUpdating) {
        //do something
    }
}

The isUpdating variable in service variable is assigned to true, but it is not updating in the component. Any help would be greatly appreciated :)

Answer 1

You might use Subject or if you need an initial value then BehaviorSubject from rxjs in your service then subscribe to it in you component.

Service:

isUpdatingSubject: BehaviorSubject<boolean> = new BehaviorSubject(false); // inital value is "false"

isUpdating = this.isUpdatingSubject.asObservable();

setUpdateState = (newState) => {
   this.isUpdatingSubject.next(newState);
}

Component:

ngOnInit(){ // You may use another method, such as "constructor" or custom one
  this.service.isUpdating.subscribe((isUpdating) => {
    if(isUpdating){
      //do something
    }
  })
}

Note: Don't forget to unsubscribe from the service on ngDestroy.

Answer 2

You have not invoked the method - updateTheVairable() in the service.ts to set the value.

methodRequiringUpdateFromService(){
this.service.updateTheVairable()
if(this.service.isUpdating){
//do something
}
}