代码之家 › 专栏 › 技术社区 › Sledge

如何对角度小于2.x的变化做出反应?

onchange rxjs angular

Sledge · 技术社区 · 6 年前

我有一个数据服务组件,打算在几个组件之间共享一个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 但是THTE ngOnChanges() 从未调用方法。但是,我希望有一种方法可以在适当的生命周期钩子中处理这类事情,比如 NgonChanges()号 因为最终我可能想要有多个订阅。

有没有其他方法来应对我丢失的可观察到的变化?这似乎是一件很平常的事情,但我很难从目前为止所遇到的资源中理解。

1 回复 | 直到 6 年前

CozyAzure 6 年前

我认为你对 Observables 以及 ngOnChanges 角的生命周期挂钩。

NGonchanges公司 - as per the documents ,是一个生命周期挂钩,也称为回调函数,如果有任何数据绑定输入属性(即,使用 @Input 在你的角度。它是从未用于检测您的 可观测的 .

当Angular(RE)设置数据绑定输入属性时响应。方法接收当前和以前属性值的SimpleChanges对象。

在ngoninit()之前以及一个或多个数据绑定输入属性更改时调用。

假设你是 following the Angular docs (可以看到,您的代码几乎与Doc的示例一样精确),您可以看到它们的代码具有使用 @输入 .

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

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

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

所以不, NGonchanges公司 是不是您希望编写代码以响应可观察到的更改的位置。您可以编写代码来响应 @输入 变化。 Observable 的 subscribe 已经存在,您可以在事件 可观测的 发射。订阅您的 Observabels 是的,最好的地方 ngOnInit 生命周期挂钩。