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

}