Angular 6 - 子（内部）组件发出 EventEmitter 并等待父组件 return 响应

Question

我把这个组件作为父组件 (facility.component)，我在这个父组件中嵌入了一个 child/inner 组件 (editableTable.component)，像这样

facility.component

  <editable-table 
  [dataList]="nursingUnitList" 
  (dataListUpdater)="updateNursingUnitList($event)">
  <editable-table>

facility.ts（调用服务并从 NursingUnit table 获取所有数据）

 updateNursingUnitList(getUpdate: boolean) {
    if (getUpdate == true) {
      this.nursingUnitService.getAllUnits().subscribe(
        (data: nursingUnit[]) => {
          this.nursingUnitList = data;
        }
      )

在 chile/inner 组件中我有这个，

editableTable.ts（通过单击刷新按钮，从 NursingUnit table 获取 latest/refreshed 项目列表）

export class EditableTableComponent implements OnInit {

@Input() dataList: any[];
@Output() dataListUpdater = new EventEmitter<boolean>();

refresh() {

this.dataListUpdater.emit(true);

if (this.dataList.length != 0) {
// After getting updated/refreshed list do something here
// but I just got the dataList is null as the compiler not wait for emitter to get the updated/refreshed list from the parent component
    }

}

我的问题是如何在发出点等待以获取更新的列表，例如 angular 中的订阅服务或 C# 中的异步等待。

感谢您的帮助！

Answer 1

您可能需要查看 OnChanges 生命周期挂钩。

export class EditableTableComponent implements OnInit, OnChanges {

  @Input() dataList: any[];
  @Output() dataListUpdater = new EventEmitter<boolean>();

  ngOnChanges(change: SimpleChanges) {
    if(change.dataList) {
      // do something
    }
  }

}

Answer 2

在子组件 (editableTable.ts) 中，您可以实现一个 OnChanges 挂钩，它看起来像这样：

ngOnChanges(changes: SimpleChanges): void {
  const { dataList } = changes;
  if (dataList && dataList.previousValue !== dataList.currentValue) {
    'here call method which will handle dataList as you wish, because at this
     moment your dataList is updated from parent component. But don't call
     refresh() method because it will again emit Output from child component
     so you need to move code which handle dataList in a separate method.'
  }
}