Angular 6 - 子(内部)组件发出事件发射器并等待父组件返回响应

Question

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

设施组件

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

facility.ts(调用服务并从护理单元表中获取所有数据)

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

在智利/内部组件我有这个，

editableTable.ts(通过单击"刷新"按钮，从护理单元表中获取最新/刷新的项目列表)

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.'
}
}