Angular2 Observable - How to call next from outside of the Observable's constructor

33

votes

I am building a service which exposes an Observable. In this service I receive external function calls which should trigger a next call on the Observable so that various consumers get the subscribe event. During Observer constructor I can call next and everything works great, but how can I access this outside of the constructor so that external triggers can fire next calls?

private myObservable$: Observable<any>;

During service init I do

this.myObservable$ = new Observable(observer => {
    observer.next("initial message");
}

Then in other methods of the same service I want to be able to execute something like

this.myObservable$.observer.next("next message");

The above obviously doesn't work, but how can I accomplish this goal?

I'm assuming I'm missing something basic since there must be a way to emit further messages outside of the Observable's initial constructor

angularrxjs

45

votes

You should create a Subject for that

this.myObservable$ = new Subject();

And then you can call at any point:

this.myObservable$.next(...);

Or use subscribe:

this.myObservable$.subscribe(...)

9

votes

Actually Subject is used for both publisher and subscriber, and here I think you need only to publish your value, so simply use Observable.

By using observable, assign Subscriber to class level variable and then use it, like below code

subscriber: Subscriber<boolean>;

public observe(): Observable<boolean> {

    return new Observable<boolean>(subs => {
      this.subscriber = subs;
    });
  }

public callNext() {

    if (this.subscriber) {
      this.subscriber.next();
      this.subscriber.complete();
    }
  }

4

votes

Two ways:

Make myObservable$ public:
```
public myObservable$: Observable;
```

Encapsulate the observable in a subject stream, and provide a helper to call next:

export class TestService {
  public myObservable$: Observable;
  private _myObservableSubject: Subject;

  constructor() {
    this._myObservableSubject = new Subject();
    this.myObservable$ = this._myObservableSubject.asObservable();
  }

  public NextMessage(message?: string): void {
    this._myObservableSubject.next(message);  
  }
}

3

votes

Observable: You can only call next() function inside the constructor and only one time you can subscribe

message = new Observable((observer)=>{
   observer.next(9);
})

this.messsage.subscribe((res)=>{
   console.log(res)
})

output: 9

Subject: You can only call next() function outside the constructor and multiple times you can subscribe. The subject does not store any initial value before subscribe.

messsage = new Subject()
this.messsage.next(3)
this.messsage.subscribe((res)=>{
   console.log(' A '+res)
})
this.messsage.next(4)
this.messsage.next(5)
this.messsage.subscribe((res)=>{
   console.log(' B '+res)
})
this.messsage.next(6)

output: 
A 4
A 5
A 6
B 6

BehaviorSubject: You can only call next() function outside the constructor and multiple times you can subscribe. The BehaviorSubject does store only one initial value before subscribe.

messsage = new BehaviorSubject ()
this.messsage.next(3)
this.messsage.subscribe((res)=>{
   console.log(' A '+res)
})
this.messsage.next(4)
this.messsage.next(5)
this.messsage.subscribe((res)=>{
   console.log(' B '+res)
})
this.messsage.next(6)

output: 
A 3
A 4
A 5
B 5
A 6
B 6

Angular2 Observable - How to call next from outside of the Observable's constructor

4 Answers