无法从 Angular 中的 EventEmitter 返回值

Question

我想调用一个方法并在以下组件之间获取结果。我知道有更好的方法，例如直接从服务调用方法，但我在我的列表组件中使用基本组件，我需要使用 EventEmitter 来执行该方法并检索其结果。那么，如何getServerData从基础组件调用方法并通过 EventEmitter 检索其结果？当我使用以下方法时，它返回未定义。

基础组件：

@Output() request: EventEmitter<any> = new EventEmitter<any>();

list() {

    // code omitted for brevity

    const result = this.emitDataRequest(index);

    return result;

}

emitDataRequest(index) {

    return this.request.emit(index);

}

列表组件：

request(index) {

    return this.getServerData(index);

}

getServerData(index): Observable<ListOfEmployee> {

    return this.demoService.get(index);

}

Answer 1

EventEmitter 不能有返回值。据我所知你可以做两件事。@输入回调可以将方法传递给您的子组件并在那里使用它。例如。父组件：// HTML<app-sub [parentHook]="hook.bind(this)"></app-sub>// TShook(value) {&nbsp; return value;}子组件// HTML<button (click)="getValueFromHook()">Click me!</button>// TS@Input() parentHook: () => number;public getValueFromHook(): number {&nbsp; const valueFromHook = this.parentHook.call(this, 20);&nbsp; console.log(valueFromHook);}在您的情况下，您可以在此处返回一个 Observable。@输入输出您可以将数据作为 an 传递@Input并在发出事件时更改它。在您的子组件中，您可以处理ngOnChanges上的更改事件。例如：父组件：// HTML<app-sub&nbsp; [data]="data"&nbsp; (request)="handleRequest($event)"></app-sub>// TSpublic data = 5;public handleRequest(request) {&nbsp; this.data = request + this.data;}子组件// HTML<button (click)="request.emit(20)">Click it!</button>// TS@Input() data: number;@Output() request = new EventEmitter();ngOnChanges(changes: SimpleChanges) {&nbsp; console.log(this.data);}我希望这对您有用。@Input & @Output 与 Observables与前面的示例相同，但使用可观察对象，这样您就不必使用 onChanges 生命周期例如：父组件：// HTML<app-sub&nbsp; [data$]="data"&nbsp; (request)="handleRequest($event)"></app-sub>// TSpublic data = new Subject();public handleRequest(index) {&nbsp; // here you can do your request to fetch some data and fill in&nbsp;&nbsp; // the data$ observable with the result&nbsp; this.fetchSomeDataBasedOnIndex(index).subscribe(result => {&nbsp; &nbsp; this.data.next(result)&nbsp; });}子组件// HTML<button (click)="request.emit(20)">Click it!</button>// TS@Input() data$: Subject;@Output() request = new EventEmitter();ngOnInit(): void {&nbsp; this.data$.subscribe(d => console.log(d))}