如何在Angular4中跟踪服务变更及监听服务内变量/数组变化

嘿，在Angular 4里跟踪服务的变更、监听变量或数组变化，其实有几种实用的方案，我结合实际项目经验给你拆解下：

这是Angular生态里最常用也最符合响应式编程理念的方案，毕竟Angular本身就深度集成了RxJS。

监听单个变量 #

比如你要跟踪服务里的用户名变化，可以用BehaviorSubject（它会保存当前最新值，新订阅的组件能直接拿到当前值，比普通Subject更实用）：

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

@Injectable()
export class UserService {
  // 初始化BehaviorSubject，设置默认值
  private _userName = new BehaviorSubject<string>('默认用户');
  // 对外暴露Observable，避免外部直接修改Subject内部状态
  public userName$: Observable<string> = this._userName.asObservable();

  // 提供修改值的公共方法，外部通过这个方法更新变量，自动触发订阅
  updateUserName(newName: string) {
    this._userName.next(newName);
  }
}

然后在组件里订阅监听：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UserService } from './user.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-user-profile',
  template: `<h3>当前用户：{{ currentUserName }}</h3>`
})
export class UserProfileComponent implements OnInit, OnDestroy {
  currentUserName: string;
  // 用于取消订阅，防止内存泄漏
  private destroy$ = new Subject<void>();

  constructor(private userService: UserService) {}

  ngOnInit() {
    // 订阅服务的Observable，监听变量变化
    this.userService.userName$
      .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
      .subscribe(name => {
        this.currentUserName = name;
        // 这里可以添加任何变更后的逻辑，比如更新视图、调用接口等
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

监听数组变化 #

数组的处理逻辑类似，核心是不要直接修改原数组（比如push/pop），而是生成新数组后传递给next，这样能避免引用不变导致的意外问题：

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

@Injectable()
export class TodoService {
  private _todoList = new BehaviorSubject<string[]>([]);
  public todoList$: Observable<string[]> = this._todoList.asObservable();

  addTodo(newTodo: string) {
    // 先获取当前数组，用扩展运算符生成新数组
    const currentTodos = this._todoList.value;
    this._todoList.next([...currentTodos, newTodo]);
  }

  removeTodo(index: number) {
    const currentTodos = this._todoList.value;
    const newTodos = currentTodos.filter((_, i) => i !== index);
    this._todoList.next(newTodos);
  }
}

组件里订阅后，就能实时拿到更新后的数组了。

如果你的需求很简单，不想引入RxJS的复杂概念，也可以用getter/setter配合EventEmitter来实现：

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class CounterService {
  private _count = 0;
  // 定义事件发射器，对外暴露
  public countUpdated = new EventEmitter<number>();

  get count(): number {
    return this._count;
  }

  set count(newCount: number) {
    this._count = newCount;
    // 值变化时发射事件
    this.countUpdated.emit(this._count);
  }
}

组件里监听：

ngOnInit() {
  this.counterService.countUpdated.subscribe(newCount => {
    console.log('计数更新了：', newCount);
  });
}

// 触发修改
this.counterService.count = 10;

⚠️ 注意：EventEmitter本质是Angular为组件间通信设计的，服务里用虽然能工作，但灵活性远不如RxJS的Subject（比如不支持多订阅的管道操作），所以只建议在简单场景下使用。

不管用哪种方案，组件订阅后一定要在销毁时取消订阅！上面的RxJS示例用了takeUntil操作符，这是目前最优雅的取消订阅方式；如果是EventEmitter，可以直接调用unsubscribe()：

private countSubscription: Subscription;

ngOnInit() {
  this.countSubscription = this.counterService.countUpdated.subscribe(...);
}

ngOnDestroy() {
  this.countSubscription.unsubscribe();
}

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