Дождитесь загрузки данных компонента перед рендерингом следующего компонента - Angular - PullRequest
Новая
       29

Дождитесь загрузки данных компонента перед рендерингом следующего компонента - Angular

2 голосов
/ 07 февраля 2020

Мне нужно отобразить цепочку компонентов (скажем, сетки в блейдах), в которой после загрузки данных первого компонента я нажму на строку данных этого компонента, и она откроет следующий компонент. При щелчке строки данных следующего компонента он откроет другой компонент и т. Д.

Подход, которому я следую - у меня есть общая служба для всех этих компонентов, и когда данные загружаются для любого компонента, Компонент вызывает следующий метод для Поведенческого объекта моего сервиса - this.service.dataLoadedEvent$.next(componentName)

Мой метод обслуживания выглядит так - 

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]);
         }
      });
    }
  }

Компоненты выглядят как - 

 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);
      })
    );
  }

Но проблема здесь в том, что для l oop происходит аванс до того, как сервис уведомляется о завершении загрузки данных. Таким образом, он устанавливает переменную l oop в последнее значение, и метод вызывается в последнем componentInstance, который не является ожидаемым поведением. Любая помощь будет оценена. Заранее спасибо !

1 Ответ

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

ПРОБЛЕМА:

Итерации в l oop выполняются асинхронно, и, следовательно, ожидание значения не происходит.

Исправление

Эту проблему можно решить в три этапа:

  1. Создание скрытого элемента с идентификатором ' bladeTracker ' (Example: <i id="bladeTracker">1</i>) и установите его значение в качестве начального номера блейда.

  2. Создайте asyn * Функция 1049 * с await при загрузке данных, которая обновляет значение bladeTracker только при загрузке данных.

  3. Напишите функцию с именем ' showNextBlade () ', которая запускается при изменении значения элемента bladeTracker .

...