Javascript 无法以角度从EventEmitter返回值

我想调用一个方法并得到以下组件之间的结果。我知道有更好的方法，例如直接从服务调用方法，但我在列表组件中使用基本组件，我需要使用EventEmitter来执行该方法并检索其结果。那么，如何从基本组件调用

getServerData

方法，并通过EventEmitter检索其结果呢？当我使用下面的方法时，它返回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);
}

@Output（）请求：EventEmitter=neweventemitter（）；
列表（）{
//为简洁起见省略了代码
const result=this.emitDataRequest（索引）；
返回结果；
}
emitDataRequest（索引）{
返回此.request.emit（索引）；
}

列表组件：

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

请求（索引）{
返回此.getServerData（索引）；
}
getServerData（索引）：可观察{
返回此.demoService.get（索引）；
}

EventEmitter上不能有返回值。 据我所知，你可以做两件事

@输入回调 可以将方法传递给子组件并在其中使用

比如说

父组件：

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

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

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

// TS
public data = 5;

public handleRequest(request) {
  this.data = request + this.data;
}

// 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)="getValueFromHook()">Click me!</button>

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

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

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

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

ngOnChanges(changes: SimpleChanges) {
  console.log(this.data);
}

// 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))
}

//HTML
点击它！
//TS
@输入（）数据：数字；
@Output（）请求=新的EventEmitter（）；
ngOnChanges（更改：SimpleChanges）{
console.log（this.data）；
}

我希望这是对你有用的信息

@带有可观察项的输入和输出 与前一个示例相同，但对于可观察对象，您不必使用onChanges生命周期

例如：

父组件：

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

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

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

// TS
public data = 5;

public handleRequest(request) {
  this.data = request + this.data;
}

// 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
//TS
公共数据=新主题（）；
公共HandlerRequest（索引）{
//在这里，您可以请求获取一些数据并填写
//数据是可以观察到的结果
this.fetchSomeDataBasedOnIndex（index.subscribe）（结果=>{
this.data.next（结果）
});
}

子组件

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

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

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

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

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

ngOnChanges(changes: SimpleChanges) {
  console.log(this.data);
}

// 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))
}

//HTML
点击它！
//TS
@输入（）数据$：主题；
@Output（）请求=新的EventEmitter（）；
ngOnInit（）：void{
this.data$.subscribe（d=>console.log（d））
}

你太棒了！。。第一个方法（@Input callback）工作得很好，但是第二个（@Input&@Output）不工作，可能是因为在

handleRequest

方法中使用了

this.service.get（）.subscribe（data=>{this.data=data；}）。关于第二个有什么想法吗？也许我应该用承诺或同步的方法。顺便说一句，标记为答案并投票。实际上，在你的帮助下，你应该得到5倍的选票；）您始终可以将一个可观测值作为输入传递给您的子组件，并在请求发生后发出一个新值，然后在您的子组件中订阅该可观测输入，您可以处理所有更改，这要感谢lt。您是否可以将此添加为第三个示例用法？你知道为什么它不起作用吗？我在分页时传递数据，这就是为什么我认为问题可能是由observable或subscribe引起的。然后我更新了第一种方法，更新了
hook.bind（this）
部分，以便其他人也能从这个有用的答案中受益。我认为编辑是正确的？