Angular 9 вызов функции, когда два компонента загружены - PullRequest
Новая
       12

Angular 9 вызов функции, когда два компонента загружены

0 голосов
/ 23 февраля 2020

Я пытаюсь использовать два компонента: <app-map> и <app-markers-list>.

<app-map> загружает API Карт Google и отображает карту на странице. Он генерирует событие mapLoaded в ngAfterViewInit()

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

<app-markers-list>, загружает список маркеров с помощью Angular s HttpClient. Он генерирует событие markersLoaded в конце HttpClient.get().subscribe() Observable.

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

Как мне перехватить эти два события одновременно, чтобы я мог вызвать функцию другого компонента, которая будет заполняться карта с маркерами?

Ответы [ 2 ]

1 голос
/ 23 февраля 2020

Я думаю, что есть простое решение. 

@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

1 голос
/ 23 февраля 2020

Я предполагаю, что вы пытаетесь захватить события из <app-map> и <app-markers-list> в родительском компоненте. Вы можете захватить, как мы обычно делаем, поместив привязку в родительский шаблон, как показано ниже: 

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

Теперь вы можете управлять этими событиями в родительском компоненте. Вы можете использовать предметы или наблюдаемые и наблюдаемые операторы (combLatest, 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');
      }
    }
...