如何使用事件发射器调用返回值的函数，并在继续之前等待响应？

Posted 2023-02-23

【中文标题】如何使用事件发射器调用返回值的函数，并在继续之前等待响应？

【英文标题】：How can I use an Event Emitter to call a function that returns a value, and wait for the response before proceeding?

【发布时间】：2020-04-10 09:48:54

【问题描述】：

所以我想从一个子组件发出一个触发父组件中的函数的事件，但我想在继续之前等待从该父函数获得响应。

孩子

@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");

父母

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

...

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

如何设置这个事件发射器？或者有没有办法在没有事件发射器的情况下做到这一点？

【问题讨论】：

你会在parentFunction() 不做你的逻辑吗？

@penleychan 子组件在收到父组件的响应后仍有需要做的逻辑

在这种情况下，您应该通过BehaviorSubject 或Subject 使用服务来处理它

【参考方案1】：

在parent-child 通信的情况下，我会坚持使用 setters 以便在属性更改时做一些事情。

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>