Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 如何应对角度变化<;2.x可观测_Angular_Rxjs_Onchange - Fatal编程技术网

Angular 如何应对角度变化<;2.x可观测

Angular 如何应对角度变化<;2.x可观测,angular,rxjs,onchange,Angular,Rxjs,Onchange,我有一个数据服务组件,用于在几个组件之间共享BehaviorSubject类变量 我已将服务设置为: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs'; @Injectable() export class SharedStateService { private selectedYe

我有一个数据服务组件,用于在几个组件之间共享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中定义的日志消息在组件处按预期显示
behavior subject test received“+yearmo+”
,但从未调用
ngOnChanges()
方法。但是,我希望有一种方法可以在适当的生命周期钩子中处理这类事情,比如
ngOnChanges()
,因为最终我可能希望有多个订阅


有没有其他方法来应对我所忽略的可观察事物的变化?这似乎是一件很常见的事情,但从我迄今为止所接触到的资源来看,我很难理解。

我认为你对
可观测的反应性和
ngOnChanges
的生命周期挂钩感到困惑

ngOnChanges
-,是一个生命周期钩子,也称为回调函数,如果您有任何数据绑定的输入属性,则将调用该回调函数,也就是说,在您的数据库中使用
@input
修饰的属性。它从不用于检测
观测值的任何变化

当角度(重新)设置数据绑定输入属性时响应。该方法接收包含当前和以前属性值的SimpleChanges对象

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

假设您是(可以看出您的代码几乎与文档的示例一样精确),您可以看到他们的代码具有使用
@Input
修饰的属性

@Input() hero: Hero;
@Input() power: string;
这两个属性实际上是通过数据绑定“传递”到组件中的,使用方括号:

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


因此,不,
ngOnChanges
不是您想要编写代码以对可观察到的更改作出反应的地方。您可以编写代码来对
@输入的更改作出反应
Observable
subscribe
已经存在,您可以在
Observable
发出发射时实现您想要的任何功能。要订阅您的
Observabels
,是的,这是作为
ngOnInit
生命周期钩子进行操作的最佳地方。

这是一个很好的洞察。一开始理解可观测数据相对于其他数据共享选项的作用是令人困惑的。