Question

我将此组件作为父组件（facility.component），并将子/内部组件（editableTable.component）嵌入此父组件中，就像这样

facility.component

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

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

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

在辣椒/内在成分中，有这个

editableTable.ts（通过单击“刷新”按钮，从NursingUnit表中获取最新/刷新的项目列表）

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
    }

}

我的问题是我如何才能在发射点等待获取更新的列表，例如在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.'
  }
}

角度6-子组件（内部）发出EventEmitter并等待父组件返回响应

2 个答案: