Angular 6 - дочерний (внутренний) компонент отправляет EventEmitter и ожидает, пока родительский компонент вернет ответ

Question

У меня есть этот компонент в качестве родительского компонента (unit.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
    }

}

Мой вопрос заключается в том, как мне ждать в точке выброса, чтобы получить обновленный список,что-то вроде сервисов подписки в angular или async в C #.

Спасибо за все, что вы можете сделать, чтобы помочь!

Answer 1

В дочернем компоненте (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.'
  }
}

Answer 2

Возможно, вы захотите взглянуть на OnChanges крючок жизненного цикла.

export class EditableTableComponent implements OnInit, OnChanges {

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

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

}