typescript - Vänta på att en komponents data laddas innan nästa komponent renderas - Angular

Jag måste återge en kedja av komponenter (säg rutnät i blad) där efter att den första komponentens data har laddats kommer jag att klicka på dataraden i den komponenten och det kommer att öppna nästa komponent. Vid klick på dataraden i nästa komponent kommer det att öppna en annan komponent och så vidare.

Tillvägagångssättet som jag följer - Jag har en delad tjänst mellan alla dessa komponenter och när data laddas för en komponent, anropar den komponenten nästa metod på BehaviourSubject av min tjänst - this.service.dataLoadedEvent$.next(componentName)

Min servicemetod ser ut så här -

public renderAllComponents(selectedOption, componentsToRender, componentsInfo): void {
    let componentInstance;

    for (let i = 0; i < componentsToRender.length; i++) {
      componentInstance = new componentsToRender[i](this);

      if (i === 0) {
        // For the component in the first/initial blade
        this.addFirstComponent(componentInstance[i]);
      }
      this.dataLoadedEvent$.subscribe((val) => {
         if (val === componentsInfo[i].name) {
           componentInstance.onSelect(selectedOption[componentsToRender[i].name]);
         }
      });
    }
  }

Komponenter ser ut som -

 public ngOnInit() {
    this.view = this.comp.pipe(
      tap(state => {
        this.isLoading = true;
      }),
      switchMap(state => {
        return this.orderService.fetch(state);
      }),
      tap(() => {
        this.isLoading = false;
        this.service.dataLoadedEvent$.next(this.constructor.name);
      })
    );
  }

Men problemet här är att for-loopen fortsätter innan tjänsten meddelas om att dataladdningen är klar. Så den sätter loopvariabeln till det sista värdet och metoden anropas på den sista komponentinstansen, vilket inte är det förväntade beteendet. All hjälp uppskattas. Tack på förhand!

Svar #1

PROBLEM:

Iterationerna i loopen körs asynkront, och därför sker inte väntan på värdet.

Fixa

Detta problem kan lösas i 3 steg, enligt följande:

  1. Skapa ett dolt element med ID 'bladeTracker' (Exempel: <i id="bladeTracker">1</i>) och sätt dess värde till det initiala bladnumret.

  2. Skapa en async-funktion med ett await på dataladdning, som uppdaterar värdet av bladeTracker endast när data är laddad.

  3. Skriv en funktion med namnet 'showNextBlade()' som triggas varje gång värdet på bladeTracker-elementet ändras.