angular - Como posso usar um Event Emitter para chamar uma função que retorna um valor, e esperar pela resposta antes de prosseguir?

Então, eu quero emitir um evento de um componente filho que acione uma função no componente pai, mas eu quero esperar para obter uma resposta dessa função do pai antes de prosseguir.

Criança

@Output() callParentFunction = new EventEmitter<any>();

...

this.callParentFunction.emit();
let tempVal = responseFromParentComponent; //How can I set this value?
//After parent function has returned a response, the next line of code should run
console.log("Response returned");

Pai

template: `
    <child-component
      (callParentFunction)="parentFunction($event)"
    >
    </child-component>
  `

...

parentFunction(){
    //This function calls an api, then returns the response
    [API call goes here]
    return response;
}

Como esse emissor de eventos pode ser configurado? Ou existe uma maneira de fazê-lo sem emissores de eventos?

Resposta #1

No caso de comunicação pai-filho, eu optaria por usar setters para fazer algumas coisas quando uma propriedade muda.

child.component.ts

@Input()
set response (v: any) {
 // Do some logic here
}

@Output() 
callParentFunction = new EventEmitter<any>();

doStuff () {
 this.callParentFunction.emit();
}

parent.component.ts

public response$: Observable<IResponse | null> = of(null);

parentFunction(){
    this.response$ = this.http.get(/* ... */)
}

parent.component.html

<child-component
  [response]="response$ | async" 
 (callParentFunction)="parentFunction($event)"
></child-component>