Question

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

我的服务设置如下：

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;
  }
}

每个组件都实现对可观察对象的订阅，如下所示：

...
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);
    }
  };
...

现在，当可观察的变化时，在getYearmo中定义的日志消息将按预期显示BehaviourSubject test received "+yearmo+" at component，但是从未调用ngOnChanges()方法。但是，我想要一种在适当的生命周期钩子（如ngOnChanges()）中处理这类事情的方法，因为最终我可能希望拥有多个订阅。

还有其他方法可以对我所缺少的可观察物做出反应吗？看来这是很平常的事情，但是我无法从到目前为止所遇到的资源中了解。

Answer 1

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

ngOnChanges-as per the documents是一个生命周期挂钩，又名回调函数，如果您有任何数据绑定的输入属性，即将使用@Input装饰的属性您的角度。它从不用于检测您的Observables的任何变化。

当Angular（重新）设置数据绑定的输入属性时响应。该方法接收当前和先前属性值的SimpleChanges对象。

在ngOnInit（）之前以及每当一个或多个数据绑定输入属性更改时调用。

假设您是following the Angular docs（可以看出您的代码几乎与文档的示例完全一样），您可以看到他们的代码具有使用@Input装饰的属性。

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

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

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

因此，ngOnChanges不是不是您要编写代码以响应可观察的更改的位置。您可以在那里编写代码以对@Input的更改做出反应。 Observable的{{1}}已经存在，您可以在subscribe发出发射的情况下实现所需的任何操作。并且要订阅您的Observables，是的，最好的去处是Observabels生命周期挂钩。

如何对可观察的Angular <2.x变化做出反应

1 个答案: