Angular 4：组件与服务间变更检测的实现问题

你遇到的核心问题是：Angular无法自动检测到服务中普通变量的变化，EventEmitter是组件间父子通信的工具，OnChanges只监听组件@Input属性的变更，这俩自然没法帮你同步服务到组件的状态变化。下面给你一套完整的解决方案，用RxJS的状态管理来实现实时同步。

第一步：改造你的服务，用BehaviorSubject维护进度状态 #

RxJS的BehaviorSubject是专门用来管理可观察状态的，它会保存当前的最新值，并且在组件订阅时立即推送最新值，完美适配进度追踪的场景。同时我也帮你修正了代码里的两个小bug：

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

@Injectable({
  providedIn: 'root'
})
export class YourServiceName {
  denominator: number = 0;
  counter: number = 0;
  showProgressbar = false;
  // 用BehaviorSubject保存进度值，初始值设为0
  private _progressSubject = new BehaviorSubject<number>(0);
  // 对外暴露只读的Observable，防止组件直接修改状态
  progress$: Observable<number> = this._progressSubject.asObservable();

  calculateProgress() {
    // 这里之前写错成赋值=，改成判断==或者直接用变量本身
    if (this.showProgressbar) {
      const percentage = Math.round((this.counter / this.denominator) * 100);
      // 发送最新进度值到Subject，所有订阅的组件都会收到更新
      this._progressSubject.next(percentage);

      if (percentage === 100) {
        // setTimeout的写法之前错误，要用箭头函数包裹逻辑才会延迟执行
        setTimeout(() => {
          this.showProgressbar = false;
          this._progressSubject.next(0);
          this.counter = 0;
          this.denominator = 0;
        }, 500);
      }
    } else {
      this.counter = 0;
      this.denominator = 0;
      this._progressSubject.next(0);
    }
  }
}

第二步：在Home组件中订阅进度变化 #

有两种方式可以订阅服务的状态，推荐用第二种（AsyncPipe），不用手动管理订阅销毁：

方式1：手动订阅（适合需要额外逻辑处理的场景）

import { Component, OnDestroy } from '@angular/core';
import { YourServiceName } from '../path-to-your-service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.html'
})
export class HomeComponent implements OnDestroy {
  showProgressBar: boolean;
  loadProgress: number = 0;
  // 保存订阅实例，组件销毁时要取消订阅防止内存泄漏
  private _progressSub: Subscription;

  constructor(private service: YourServiceName) {
    // 订阅服务的进度流，实时更新组件变量
    this._progressSub = this.service.progress$.subscribe(progress => {
      this.loadProgress = progress;
      // 顺便控制进度条的显示/隐藏
      this.showProgressBar = progress > 0;
    });
  }

  triggerEvent(){
    this.service.showProgressbar = true;
    // 这里要确保你的业务逻辑会多次调用calculateProgress来更新进度
    // 比如异步循环、文件分片上传等场景，每次完成一小步就调用一次
  }

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

方式2：用AsyncPipe自动订阅（更简洁，推荐）

这种方式不用手动管理订阅，Angular会自动帮你处理订阅和销毁：

import { Component } from '@angular/core';
import { YourServiceName } from '../path-to-your-service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.html'
})
export class HomeComponent {
  // 直接把服务的Observable暴露给模板
  loadProgress$: Observable<number>;

  constructor(private service: YourServiceName) {
    this.loadProgress$ = this.service.progress$;
  }

  triggerEvent(){
    this.service.showProgressbar = true;
  }
}

对应的模板代码：

<!-- 用AsyncPipe自动解析Observable的值，*ngIf控制显示 -->
<progressbar *ngIf="(loadProgress$ | async) > 0" [progress]="loadProgress$ | async"></progressbar>

为什么之前的方法没用？ #

• EventEmitter：它是Angular组件用来向父组件发送事件的工具，不是为服务和组件通信设计的，所以在服务里用它根本起不到作用。
• OnChanges：它只监听组件@Input属性的变化，服务里的变量不属于组件的输入属性，自然触发不了变更检测。

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