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 ......
  
}

CodePudding user response：

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;
    });
  }
}