Angular服务中避免使用全局变量的替代实现方案

你当前代码里的check是服务类的公共实例属性，并非挂载到全局作用域的全局变量，如果要避免直接暴露可随意修改的公共属性，同时实现服务内部更新值、组件可访问最新值的效果，有两种常用实现方案，可根据需求选择：

方案1：RxJS BehaviorSubject 响应式状态（推荐，Angular生态标准实践） #

适合需要组件实时感知check值变化、自动更新视图/触发逻辑的场景，状态完全封闭在服务内部，外部无法直接修改，只能通过服务提供的方法更新。

服务改造代码 test.service.ts #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

// 根据自身业务调整服务提供层级，单例是状态共享的前提
@Injectable({ providedIn: 'root' })
export class TestService extends AbstractGridServiceHandler {
  // 私有可读流，仅服务内部可调用next更新值
  private readonly _check$ = new BehaviorSubject<string>('');
  // 对外暴露只读Observable，外部仅能订阅，无法手动修改值
  public readonly check$ = this._check$.asObservable();

  updateVal() {
    // 内部更新时推送新值
    this._check$.next('updated');
  }

  // 提供同步获取当前最新值的快照方法
  getCheckSnapshot(): string {
    return this._check$.getValue();
  }
}

组件使用代码 test1.component.ts #

• 模板场景优先用async管道自动管理订阅，无需手动取消订阅避免内存泄漏：

import { Component } from '@angular/core';
import { TestService } from 'service';
@Component({
  template: `<span>当前check值：{{ check$ | async }}</span>`
})
export class testComponent{
  check$ = this.ts.check$;
  constructor(private ts: TestService) {
    super();
  }
}

• 逻辑层需要取值时，可直接取快照或者订阅值变化：

ngOnInit() {
  // 同步获取当前值
  const currentVal = this.ts.getCheckSnapshot();
  // 监听后续值变化，组件销毁时需取消订阅
  this.ts.check$.subscribe(latestVal => {
    console.log('check最新值：', latestVal);
  });
}

方案2：私有属性+Getter访问器（轻量无依赖） #

适合不需要响应式更新、仅想避免外部随意修改服务属性的场景，改动成本极低。

服务改造代码 test.service.ts #

export class TestService extends AbstractGridServiceHandler {
  // 私有属性，仅类内部可访问修改
  private _check = '';

  // 仅对外暴露读权限，无setter，外部无法直接赋值修改
  get check(): string {
    return this._check;
  }

  updateVal(){
     this._check = 'updated';
  }
}

组件使用代码 test1.component.ts #

和原有写法几乎一致，仅能读取值、无法直接修改：

import { TestService } from 'service';
export class testComponent{
constructor(private ts: TestService) {
super();
}
  ngOnInit() {
      let a = this.ts.check ; // 正常读取
      // this.ts.check = 'xxx' 会直接编译报错，无写入权限
  }
}

注意事项 #

• 不要在多个懒加载模块/组件层级重复在providers中注册该服务，否则会生成多个服务实例，导致状态不同步，在需要共享状态的模块层级只注册一次服务即可。
• 方案1的订阅如果没有用async管道管理，一定要在组件ngOnDestroy生命周期里取消订阅，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Abhinav Parashar