Как реагировать на изменения в Angular <2.x? - PullRequest
Новая
       9

Как реагировать на изменения в Angular <2.x?

0 голосов
/ 03 июля 2018

У меня есть компонент службы данных, который предназначен для совместного использования переменной класса 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(), так как в конечном итоге я мог бы хотеть иметь более одной подписки.

Есть ли другой способ реагировать на изменения в моем наблюдаемом, что я пропускаю? Похоже, это было бы обычным делом, но у меня возникают проблемы с пониманием из ресурсов, с которыми я до сих пор сталкивался.

1 Ответ

0 голосов
/ 03 июля 2018

Я думаю, что вы путаете с реактивным свойством Observables и ngOnChanges крюком жизненного цикла Angular.

ngOnChanges - согласно документам - это ловушка жизненного цикла, называемая функцией обратного вызова, которая будет вызываться, если у вас есть какие-либо свойства ввода с привязкой к данным, то есть свойства, которые оформлены с использованием @Input в вашем ангуляре. НИКОГДА не используется для обнаружения каких-либо изменений вашего Observables.

Отвечать, когда Angular (re) устанавливает связанные с данными входные свойства. Метод получает объект SimpleChanges с текущими и предыдущими значениями свойств.

Вызывается перед ngOnInit () и всякий раз, когда изменяется одно или несколько связанных с данными входных свойств.

Предполагая, что вы следуете Angular docs (из этого видно, что ваш код почти такой же, как пример документа), вы можете видеть, что их код имеет свойства, оформленные с использованием @Input. 

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

И что эти два свойства фактически «передаются» компоненту через привязку данных, используя квадратные скобки: 

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

Так что нет, ngOnChanges это НЕ место, где вы хотите написать свой код, чтобы реагировать на ваши наблюдаемые изменения. Вы можете написать свой код, чтобы реагировать на изменения @Input. Observable subscribe уже есть для вас, чтобы реализовать все, что вы хотите в случае, если Observables испустит излучение. И подписаться на ваш Observabels, да, лучшее место, чтобы сделать это как ngOnInit ловушка жизненного цикла.

...