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

У меня этот компонент является родительским компонентом (feature.component), и я встроил дочерний / внутренний компонент (editableTable.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 await в C #.

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


angular async-await angular-services angular-event-emitter
person MoeinMP    schedule 12.06.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

export class EditableTableComponent implements OnInit, OnChanges {

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

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

}
person The Head Rush    schedule 12.06.2019

arrow_upward
1
arrow_downward

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