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

Question

我正在尝试使用两个组件，<app-map> 和 <app-markers-list>。

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

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

<app-markers-list> 通过 Angular 的 HttpClient 加载标记列表。它在HttpClient.get().subscribe() Observable 的末尾发出一个markersLoaded 事件。

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

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

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

Answer 2

我假设您正在尝试在父组件中捕获来自 <app-map> 和 <app-markers-list> 的事件。 你可以像我们通常做的那样捕获，将绑定放在父模板中，如下所示：

<app-map (mapLoaded)="mapLoaded($event)"></app-map>
<app-markers-list (markersLoaded)="markersLoaded($event)"></app-markers-list>

现在您可以在父组件中管理这些事件。您可以使用主题或可观察对象和可观察运算符 (combineLatest, of)。请在下面找到如何使用它的代码。

import { combineLatest, of } from 'rxjs';

    // this will be your parent component.
    export class ParentComponent {

      mapLoaded = new Subject()
      mapLoaded$ = this.mapLoaded.asObservable();
      markerListLoaded = new Subject()
      markerListLoaded$ = this.markerListLoaded.asObservable();

      constructor() {
        const combinedValues = combineLatest(mapLoaded$, markerListLoaded$);
        combinedValues.subscribe((value) => {
          // Here you can write code when you receive notification from both the events.
        })
      }

      mapLoaded(mapLoadedData) {
        this.mapLoaded$.next('map loaded successfully');
      }

      markersLoaded(markersLoadedData) {
        this.markerListLoaded$.next('markers loaded successfully');
      }
    }