javascript - 加载两个组件时的Angular 9调用函数

Question

我正在尝试拥有两个组件，<app-map>并且<app-markers-list>.

<app-map>加载 Google Maps API 并在页面上显示地图。它发出一个mapLoaded事件ngAfterViewInit()

@Output() mapLoaded: EventEmitter<boolean> = new EventEmitter();

<app-markers-list>通过 Angular 的HttpClient. 它在ObservablemarkersLoaded结束时发出一个事件。HttpClient.get().subscribe()

@Output() markersLoaded: EventEmitter<boolean> = new EventEmitter();

如何一次捕获这两个事件，以便调用另一个组件的函数，该函数将使用标记填充地图？

标签： javascriptangularasynchronousdom-events

Answer 1

我认为有一个简单的解决方案。

@Output()
allLoaded = new EventEmitter();

oneLoaded = false;

ngAfterViewInit() {
   this.emitAllLoaded();
}

yourFunctionWhereHttpClientGetLocated() {
   this.http.get(..).subscribe(() => {
       this.emitAllLoaded();
   });
}

emitAllLoaded() {
   if (oneLoaded) this.allLoaded.emit();
   oneLoaded = true;
}

你可能不需要使用 Observable 或 Subject