CODEWITHSUNDEEP
javascripttypescriptangular
BrentShanahan
BrentShanahan

Reputation: 691

Angular2 call observer next from child object

I'll try to explain this as best I can.

I have a service that contains an observable class that performs tasks to update itself. That observable class needs to be pushed out to the app using the observer located in the service. How can I call that observer from the child without creating some sort of dependency loop?

Here is a rough example:

class MyService {
  subClass$: Observable<SubClass>;
  _subClassObserver: Observer<SubClass>;

  constructor(private _subClassStore: SubClass){
    this.subClass$ = new Observable(observer => {
      this._subClassObserver = observer
    }).share();
  }

  pushData(){
    this._subClassObserver.next(this._subClassStore)
  }
}

class SubClass {
  displayData: string;
  displayData2: number;

  constructor(){
    socket.on('setData', function(obj){
      this.displayData = obj.dd1;
      this.displayData2 = obj.dd2;
      //How to call pushData() in MyService from here to push data to app?
    }
  }
}

_subClassStore is updating through a stream coming in from socket.io. How do I let MyService know when the SubClass data changes so that it can push it using _subClassObserver.next(_subClassStore)?

EDIT: I added more details to the example above to show how they are related and utilized.

SubClass is just a listener for a stream of data coming from socket.io and saving the information into the class. It starts listening when MyService is constructed.

The goal of MyService is to provide a bunch these sub classes that can be subscribed to across the app. Each one would allow access to a different data stream and the associated data, but all would be contained within a single service.

The question is how to call the pushData() function in the parent so that it keeps the stream updated for subscribers in the app.

Edit 2:

This might help. below is how it would be written as a service without the sub class. The only reason why I'm not doing this is because there are a substantial amount of these listeners being stored to Observables and abstracting them out into classes makes the information much easier to manage but pushing it to the app is what I can't figure out:

class MyService {
  class1$: Observable<DataStream>;
  _class1Observer: Observer<DataStream>;
  _class1Store: DataStream;

  constructor(){
    this._class1store = {displayData: 'hello', displayData2: 0};

    this.class1$ = new Observable(observer => {
      this._class1Observer = observer
    }).share();

    socket.on('setData', function(obj){
      this._class1Store.displayData = obj.dd1;
      this._class1Store.displayData2 = obj.dd2;
      this._class1Observer.next(this._class1Store)
    }
  }

interface DataStream = {
   displayData: string;
   displayData2: number;
}

Upvotes: 1

Views: 422

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657218

Instead of function(obj) use ()=> otherwise this won't ponit to the MyService instance.

  constructor(){
    socket.on('setData', (obj) =>{
      this.displayData = obj.dd1;
      this.displayData2 = obj.dd2;
      //How to call pushData() in MyService from here to push data to app?
    }
  }

I'm not sure but I think socket is prone to run outside Angulars zone. Try also

  constructor(zone:NgZone){
    socket.on('setData', (obj) =>{
      zone.run(() => {
        this.displayData = obj.dd1;
        this.displayData2 = obj.dd2;
      //How to call pushData() in MyService from here to push data to app?
      });
    }
  }

To be able to call a method in MyService from SubClass, SubClass needs a reference to MyService

class MyService {
  subClass$: Observable<SubClass>;
  _subClassObserver: Observer<SubClass>;

  constructor(private _subClassStore: SubClass){
    _subClassStore.myService = this;
    this.subClass$ = new Observable(observer => {
      this._subClassObserver = observer
    }).share();
  }

  pushData(){
    this._subClassObserver.next(this._subClassStore)
  }
}

class SubClass {
  displayData: string;
  displayData2: number;
  myService:MyService;

  constructor(zone:NgZone){
    socket.on('setData', (obj) =>{
      zone.run(() => {
        this.displayData = obj.dd1;
        this.displayData2 = obj.dd2;
        this.myService.pushData();
      });
    }
  }
}

Upvotes: 1

Related Questions