Angular：将数据传递给父组件后，子组件监听返回

Question

我是 Angular 的新手，一直在尝试找到我需要但无法找到的东西。请帮忙。

假设这是带有必需参数的工作函数：

export class ChildComponent implements OnInit {

  ...

  datatable(params, callback) {
    this.service.getList(params).subscribe(response => {
      callback({
        recordsTotal: response.recordsTotal,
        recordsFiltered: response.recordsFiltered,
        data: response.data
      });
    });
  }

  ...

}

以上工作正常。但是后来我想把这个 ChildComponent 作为共享组件，所以我必须分离这个函数并将它放在 ParentComponent 下。请注意，下面的代码不正确，但我试图这样解释我的观点：

子组件：

export class ChildComponent implements OnInit {

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

  datatable(params, callback) {
    this.source.emit(params, callback).subscribe(response => {
      callback({
        recordsTotal: response.recordsTotal,
        recordsFiltered: response.recordsFiltered,
        data: response.data
      });
    });
  }
  
  ...

}

父组件：

@Component({
  selector: 'parent-component',
  template: '
   <child-component (source)="getList($event)"></child-component>
  '
})
export class ParentComponent implements OnInit {
  
  constructor(private service: Service) { }
  
  getList(params) {
    return this.service.getList(params);
  }

}

服务：

export class Service {

  constructor(private http: HttpClient) { }

  getList(data) {
    return this.http.post("http://example.com/list", data)
  }
}

我知道我做错了。我需要 ChildComponent 通过 ParentComponent 的函数传递参数，然后从那里监听返回。我该如何以正确的方式做到这一点？谢谢。

Answer 1

我认为你没有使用 EventEmitter 你定义了它但没有使用

也许

datatable(params, callback) {
  this.service.getList(params).subscribe(response => {
    callback({
      recordsTotal: response.recordsTotal,
      recordsFiltered: response.recordsFiltered,
      data: response.data
    });

    this.source.emit('what ever you want to pass');
  });
}

父组件.ts

@Component({
  selector: 'parent-component',
  template: '
   <child-component (source)="getList($event)"></child-component>
  '
})
export class ParentComponent implements OnInit {
  
  constructor(private service: Service) { }
  
  getList(params) {
    return this.service.getList(params).subscribe();
  }

}