Angular 4 emitting and subscribing to an event in a shared service

user_2607171 0
Viewed 48547

I am emitting an event in my main component:

main.component.ts

this.sharedService.cartData.emit(this.data);

Here is my sharedService.ts

import { Component, Injectable, EventEmitter } from '@angular/core';
export class SharedService {
    cartData = new EventEmitter<any>();
}

In my other (Sub) Component, I want to access this value, but somehow, the subscription does not work:

dashboard.ts

private myData: any;

constructor(private sharedService: SharedService) {
    this.sharedService.cartData.subscribe(
        (data: any) => myData = data,
        error => this.errorGettingData = <any>error,
        () => this.aggregateData(this.myData));
}

Am I missing something? It works fine when I pass the data as an Injectable. Emitting the event (in the main component) happens after some REST calls.

Update

So the problem is that the Subcomponent is created after the first emit of the event. I guess in this case it is better to inject the data into the subcompnent directly.

sharedservices eventemitter angular typescript subscription
2 Answers

Try this: 

export class SharedService {
    private dataPusher = new Subject<any>();
    cartData = dataPusher.asObservable().pipe(shareReplay(1));

    pushData(value:any) {
       this.dataPusher.next(value);
    }
}

What that does is that it will replay the last emitted value for the "late" subscriber. If you want to have a initial value being emitted, you could use BehaviourSubject - it takes initial value in the constructor.

Or you could pipe/chain it with startWith operator.

cartData = dataPusher.asObservable().pipe(startWith("someValue"), shareReplay(1));
user_29111810
Related