How to wait completing of event subscriber with Observable call
To delay step5 emit a callback from child.
export class ChildComponent{
@Output() childEvent = new EventEmitter();
someFunction() {
// Step 1: event emit
this.childEvent.emit(execStep5);
}
execStep5() {
// Step 5: Subscribers execution finished
// Some code which should to reached after all event subscribers
}
}
Execute execStep5
in the parent when ready
handleChildEvent(execStep5) {
...
// Step 4: Another code
execStep5();
For step3 & step4, change subscribe
to map
, then subscribe and execute step4 and the callback.
Don't use await/async, since rxjs already has these tools - don't mix two methods.
export class ParentComponent{
// Step 2: handler start
handleChildEvent(execStep5) {
// this.longTimeMethod return Observable<void>
this.myService.longTimeMethod()
.map(() => {
// Step 3: Method executing finished
return Observable.of('done');
})
.subscribe(() => {
// Step 4: Another code
execStep5();
});
}
}
There is probably even shorter code to do this, but this should work.
x666ep
Updated on July 20, 2022Comments
-
x666ep over 1 year
I have two components. Child component has an event (EventEmitter). Parent component has handler with long time method.
I need to wait for finishing of executing of my method (longTimeMethod) before further actions. Method continues near 5 seconds.
I want to reach execution of all steps consistently (1 -> 2 -> 3 -> 4 -> 5).
But now sequence is 1 -> 2 -> 4 -> 5 -> 3
@Component({ selector: 'child-selector', template: '<>********</>' }) export class ChildComponent{ @Output() childEvent = new EventEmitter(); someFunction() { // Step 1: event emit this.childEvent.emit(); // Step 5: Subscribers execution finished // Some code which should to reached after all event subscribers } } @Component({ selector: 'parent-selector', template: '<child-selector (childEvent)="handleChildEvent()"></child-selector>' }) export class ParentComponent{ // Step 2: handler start handleChildEvent() { // this.longTimeMethod return Observable<void> this.myService.longTimeMethod() .subscribe(() => { // Step 3: Method executing finished }); // Step 4: Another code } }
I tried to use async-await approach:
async handleChildEvent() { // this.longTimeMethod return Observable<void> await this.myService.longTimeMethod().toPromise() .then(() => { // Step 3: Method executing finished }); // Step 4: Another code }
Sequence changed but it's still not correct: 1 -> 2 -> 5 -> 3 -> 4. How to accomplish correct behavior?