如何对 Angular <2.x observable 中的变化做出反应

Question

我有一个数据服务组件，旨在在几个组件之间共享一个 BehaviorSubject class 变量。

我的服务是这样设置的：

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

@Injectable()
export class SharedStateService {
  private selectedYearMo = new BehaviorSubject('2018-11');
  yearmo = this.selectedYearMo.asObservable();

  constructor() { }

  changeYearmo(yearmo: string) {
    this.selectedYearMo.next(yearmo);
    this.yearmo = this.selectedYearMo.asObservable();
    console.log("yearmo change request recieved at service");
    console.log("yearmo changed: ", this.yearmo);
  }

  getYearmo(){
    return this.yearmo;
  }
}

每个组件都实现了对 observable 的订阅，如下所示：

...
constructor(private sharedStateService: SharedStateService) {
};
...
getYearMo(): void {
    this.sharedStateService.getYearmo().subscribe(
      (yearmo: any) => {
        console.log("BehaviourSubject test received "+yearmo+" at component.");
        this.cd.markForCheck();
      }
    );
  }
...
ngOnInit() {
  this.getYearMo();
  this.getData();
};
...
ngOnChanges(changes: SimpleChanges) {
    console.log("detected changes...");
    for (let propName in changes) {
        let change = changes[propName];
        let curVal  = JSON.stringify(change.currentValue);
        let prevVal = JSON.stringify(change.previousValue);
      console.log(curVal);
      console.log(prevVal);
    }
  };
...

现在，当 observable 发生变化时，getYearmo 中定义的日志消息会按预期出现 BehaviourSubject test received "+yearmo+" at component，但永远不会调用 ngOnChanges() 方法。但是，我想要一种在像 ngOnChanges() 这样的适当生命周期挂钩中处理这类事情的方法，因为最终我可能想要有多个订阅。

是否有另一种方法可以对我丢失的可观察对象的变化做出反应？这似乎是一件很常见的事情，但我无法从迄今为止遇到的资源中理解。

Answer 1

我认为您对 Observables 的响应式属性和 Angular 的 ngOnChanges 生命周期挂钩感到困惑。

ngOnChanges- as per the documents 是一个生命周期挂钩，也就是回调函数，如果您有任何数据绑定输入属性，即使用 [=15= 修饰的属性，则会调用该回调函数] 在你的 Angular 中。它 NEVER 用于检测您的 Observables.

的任何变化

Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.

Called before ngOnInit() and whenever one or more data-bound input properties change.

假设你是following the Angular docs（可以看出你的代码几乎和文档的例子一模一样），你可以看到他们的代码具有使用@Input修饰的属性。

@Input() hero: Hero;
@Input() power: string;

这两个属性实际上是通过数据绑定使用方括号“传递到”组件中的：

<on-changes [hero]="hero" [power]="power"></on-changes>

所以不，ngOnChanges 不是您要编写代码以响应您的 Observable 更改的地方。您可以在其中编写代码以响应 @Input 更改。 Observable 的 subscribe 已经存在，你可以在 Observables 发出发射信号的情况下实现你想要的任何东西。并订阅您的 Observabels，是的，最好的地方是 ngOnInit 生命周期挂钩。

如何对 Angular <2.x observable 中的变化做出反应

How to react to change in Angular <2.x observable

onchange

rxjs

angular