如何跟踪 Angular4 中服务的变化

How to track changes in a service in Angular4

请问我如何跟踪/观察服务中的变量或数组以检测其值是否已更改或是否已添加项目???

问题是您对 "track / watch" 的最终期望是什么。 例如,您可以将变量放在 Subject 或 BehaviorSubject 中。然后订阅它。每当此主题发生变化时,您都会收到通知。

这是一个例子。

您的服务提供变量 'info',该变量被放入 BehaviorSubject 中。您可以通过 getters 和设置器访问此变量。请注意 getter returns 一个 Observable,它对监控变化很重要。

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

@Injectable()
export class MyService {
  private info = new BehaviorSubject('information');

  getInfo(): Observable<string> {
    return this.info.asObservable();
  }

  getInfoValue(): string {
    return this.info.getValue();
  }

  setInfo(val: string) {
    this.info.next(val);
  }
}

然后在您的组件中执行以下操作

import { MyService } from 'my.service';

constructor(
    private myService: MyService
) { 

    /**
     * whenever your variable info inside the service changes
     * this subscription will get an event and immediately call the code
     * inside.
     */
    this.myService.getInfo().subscribe(value => {
        // do something with this value
        console.log('Info got changed to: ', value);
    });
}

这是监控服务内变量变化的最佳方式。