调用Angular服务方法更新变量后组件取值仍为初始值如何解决

1. 首要问题：变量拼写错误 #

你代码中存在低级拼写错误：组件构造函数注入的服务参数名是mySevice（少了字母r，正确拼写应为myService），而你调用方法时用的是this.myService，此时this.myService并未被正确注入，实际为undefined，setHubspotTogglesStatus方法根本没有执行，所以变量自然保持初始值on。
修正后的组件代码参考：

// 补充缺失的Angular核心装饰器导入
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
// 补充服务导入，路径替换为你的服务实际路径
import { MyService } from './xxx/MyService';

@Component({
selector: 'my-selector',
templateUrl: './myCompo.component.html',
styleUrls: ['./myCompo.component.sass'],
})
export class MyComponent implements OnInit {

constructor(
    private myService: MyService, // 修正拼写：Sevice → Service
) {
   this.myService.setHubspotTogglesStatus()
   console.log(this.myService.callLogsToggle) // 此时会正确输出'off'
}

2. 拼写修正后仍有问题的排查方向 #

如果修正拼写后问题仍然存在，按以下顺序排查：

• 确认setHubspotTogglesStatus方法没有异步逻辑：如果你的实际业务代码中该方法包含HTTP请求、定时器等异步操作，同步打印时异步逻辑还未执行，自然拿不到更新后的值，建议改为异步回调或者用下面的响应式方案监听状态变化。
• 确认服务是单实例：你已经在服务的@Injectable中配置了providedIn: 'root'，如果同时在任意模块、组件的providers数组中重复声明MyService，会生成多个独立的服务实例，不同实例的变量互不影响，删掉重复声明即可。
• 确认懒加载模块没有单独注册服务：如果项目使用了懒加载模块，不要在懒加载模块的providers中单独注册该服务，否则懒加载模块会生成独立的服务实例。

3. 进阶优化：使用响应式状态管理 #

如果后续需要在多个组件中监听这个变量的变化，推荐使用RxJS的BehaviorSubject封装状态，避免直接访问公共变量：
服务优化代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { environment } from '../../../environments/environment';
import { HttpService } from '../http/http.service';

@Injectable({
   providedIn: 'root',
})
export class MyService {
  // 私有Subject，内部维护状态
  private callLogsToggleSub = new BehaviorSubject<string>('on');
  // 对外暴露只读的Observable，外部只能订阅不能直接修改
  public callLogsToggle$ = this.callLogsToggleSub.asObservable();

  constructor() {}

  public setHubspotTogglesStatus() {
    this.callLogsToggleSub.next('off');
  }
}

组件中使用：

constructor(private myService: MyService) {
  this.myService.setHubspotTogglesStatus();
  // 订阅获取最新值，不管是同步还是异步更新都能拿到正确结果
  this.myService.callLogsToggle$.subscribe(val => {
    console.log(val); // 输出'off'
  })
}

内容的提问来源于stack exchange，提问作者Wahéb