无法 return 来自 Angular 中 EventEmitter 的值

Question

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

基础组件：

@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 不能有 return 值。据我所知，你可以做两件事。

@输入回调

可以将方法传递给您的子组件并在那里使用它。

例如

父组件：

// HTML
<app-sub [parentHook]="hook.bind(this)"></app-sub>

// TS
hook(value) {
  return value;
}

子组件

// HTML
<button (click)="getValueFromHook()">Click me!</button>

// TS
@Input() parentHook: () => number;

public getValueFromHook(): number {
  const valueFromHook = this.parentHook.call(this, 20);
  console.log(valueFromHook);
}

在您的情况下，您可以在此处 return Observable。

@输入和@输出

您可以将数据作为 @Input 传递，并在发出事件时更改它。在您的子组件中，您可以处理 ngOnChanges.

上的更改事件

例如：

父组件：

// HTML
<app-sub
  [data]="data"
  (request)="handleRequest($event)">
</app-sub>

// TS
public data = 5;

public handleRequest(request) {
  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) {
  console.log(this.data);
}

希望这些信息对您有用。

@Input & @Output with Observables

与前面的示例相同，但使用可观察对象，像这样您不必使用 onChanges 生命周期

例如：

父组件：

// HTML
<app-sub
  [data$]="data"
  (request)="handleRequest($event)">
</app-sub>

// TS
public data = new Subject();

public handleRequest(index) {
  // here you can do your request to fetch some data and fill in 
  // the data$ observable with the result
  this.fetchSomeDataBasedOnIndex(index).subscribe(result => {
    this.data.next(result)
  });
}

子组件

// HTML
<button (click)="request.emit(20)">Click it!</button>

// TS
@Input() data$: Subject;
@Output() request = new EventEmitter();

ngOnInit(): void {
  this.data$.subscribe(d => console.log(d))
}

无法 return 来自 Angular 中 EventEmitter 的值

Cannot return value from EventEmitter in Angular

javascript

observable

rxjs

angular

@输入回调

@输入和@输出

@Input & @Output with Observables