当Angular服务变量变更时，如何重新加载指定组件的HTML？

嘿，这个问题我熟！直接用普通变量共享数据的话，组件B改完值组件A的视图肯定不会自动更——因为Angular的变更检测抓不到普通变量的赋值变化。咱们得把服务里的变量改成可观察对象，让它能主动通知订阅的组件更新视图，具体步骤如下：

步骤1：改造globalVariables服务 #

把普通的var换成BehaviorSubject（属于RxJS的可观察对象），同时封装获取和更新值的方法，这样更规范：

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

@Injectable({
  providedIn: 'root' // 确保服务是单例，所有组件用同一个实例
})
export class GlobalVariablesService {
  // 初始化BehaviorSubject，给个默认值（比如空字符串或null）
  private _varSubject = new BehaviorSubject<string>('初始值');
  // 把Subject转成Observable，外部只能订阅不能直接修改
  var$ = this._varSubject.asObservable();

  // 获取当前值的方法
  getCurrentVar(): string {
    return this._varSubject.value;
  }

  // 更新值的方法，调用next()就能通知所有订阅者
  updateVar(newValue: string): void {
    this._varSubject.next(newValue);
  }
}

步骤2：组件A中绑定并响应值变化 #

有两种简单的方式让组件A的HTML自动更新，推荐第一种：

方式一：用async管道（最省心，自动管理订阅） #

直接在模板里用async管道订阅服务的var$，值变化时模板会自动刷新，不用手动管订阅销毁：

<div>
  <div>
    <app-header></app-header>
  </div>
  <!-- 把值传给子组件 -->
  <app-side-nav-bar [inputVar]="globalService.var$ | async"></app-side-nav-bar>
  <!-- 直接显示当前值 -->
  <p>当前共享值：{{ globalService.var$ | async }}</p>
</div>

组件A的TS代码只需要注入服务就行：

import { Component } from '@angular/core';
import { GlobalVariablesService } from './global-variables.service';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html'
})
export class ComponentAComponent {
  // 把服务设为public，方便模板直接调用
  constructor(public globalService: GlobalVariablesService) {}
}

方式二：手动订阅（适合需要在TS里处理额外逻辑的场景） #

如果要在组件A的TS里处理值变化的逻辑，可以手动订阅，但记得要销毁订阅避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GlobalVariablesService } from './global-variables.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html'
})
export class ComponentAComponent implements OnInit, OnDestroy {
  currentVar: string;
  private varSubscription: Subscription;

  constructor(private globalService: GlobalVariablesService) {}

  ngOnInit(): void {
    // 订阅值的变化，更新组件内变量
    this.varSubscription = this.globalService.var$.subscribe(newValue => {
      this.currentVar = newValue;
      // 如果组件用了OnPush变更检测策略，这里可以加一行：this.cdRef.markForCheck()
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.varSubscription.unsubscribe();
  }
}

对应的模板：

<div>
  <div>
    <app-header></app-header>
  </div>
  <app-side-nav-bar [inputVar]="currentVar"></app-side-nav-bar>
  <p>当前共享值：{{ currentVar }}</p>
</div>

步骤3：组件B中修改服务的值 #

组件B注入服务后，调用updateVar方法就行，组件A会立刻收到通知更新视图：

import { Component } from '@angular/core';
import { GlobalVariablesService } from './global-variables.service';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html'
})
export class ComponentBComponent {
  constructor(private globalService: GlobalVariablesService) {}

  // 比如点击按钮触发修改
  changeSharedValue(): void {
    this.globalService.updateVar('组件B修改后的新值');
  }
}

额外提醒：如果组件A用了OnPush变更检测 #

要是组件A设置了changeDetection: ChangeDetectionStrategy.OnPush，除了用async管道，还可以在组件A中注入ChangeDetectorRef，在订阅回调里调用cdRef.markForCheck()来触发变更检测（代码里已经标了注释）。

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