Here we have to classes GetDataAsyncService which waits for change in the store (and not executes the block of code under it until a change in the store ( this.getDataAsyncService.getAsyncData().subscribe((data)=>{ )}). When it is called from MainComponent it will get return of(propA); (from GetDataAsyncService) before the block of code in the listener is executed – because the listener is still waiting for a change in the store. I want to emit that observable only when that operation block is executed.
export class GetDataAsyncService { propA; constructor(private store: Store<AppState>) getData():Observable<any>{ this.store.pipe(select(appState)).subscribe((val)=>{ // operation block // some operations // some more operations this.propA = val.propA; }) return of(propA); // this should be emitted with the latest value only when the block of code above executes - not before that } } export MainComponent implenents OnInit{ propA: string = ''; constructor(private getDataAsyncService: GetDataAsyncService){} ngOnInit(): void{ this.getDataAsyncService.getAsyncData().subscribe((data)=>{ this.propA = data.propA; }) } // any operation involving propA // code ...... }
Advertisement
Answer
You can achieve that by returning the Observable
itself from the getData
function and mapping it to the required prop, instead of subscribe
to it, like the following:
export class GetDataAsyncService { propA; constructor(private store: Store<AppState>) {} getData(): Observable<any> { return this.store.pipe( select(appState), map((val) => val.propA) ); } } export class MainComponent implements OnInit { propA: string = ''; constructor(private getDataAsyncService: GetDataAsyncService) {} ngOnInit(): void { this.getDataAsyncService.getAsyncData().subscribe((propA) => { this.propA = propA; }); } }