Используйте Angular resolver для предварительной загрузки данных из Firebase

Question

При первой загрузке страницы просмотра списка все идет хорошо, список заполняется, и я вижу все данные. Затем я перехожу к другому представлению, чтобы добавить новый объект, при сохранении я перенаправлен обратно в представление списка. При повторной посадке в виде списка я на короткое время вижу элементы списка, а затем они исчезают, пока я не перефразирую sh страницу.

Как использовать Angular преобразователи с выборкой данных Firebase?

Мой резольвер

@Injectable({
  providedIn: 'root'
})
export class CupListResolver implements Resolve < Cup > {

  constructor(
    private cupService: CupService
  ) {}

  resolve(route: ActivatedRouteSnapshot): Promise < Cup > {
    let cups;

    return new Promise((resolve, reject) => {
      this.cupService.getCups().subscribe(data => {
        cups = data.values();
        return resolve(cups);
      }, (error: any) => {
        return reject(error);
      });
    });
  }
}

Мой сервис

@Injectable({
  providedIn: 'root'
})
export class CupService {

  constructor(
    private afs: AngularFirestore) {}

  getCups() {
    return this.afs.collection(`cups`, ref => ref.orderBy('color')).snapshotChanges();
  }
}

Answer 1

Полагаю, вы добавили resolver в некоторые path, и когда вы "возвращаетесь" (перенаправлением или кнопкой браузера), вы не уничтожаете свой компонент (ваш resolver не вызывается один раз снова). Вероятно, вы меняете только компонент children, когда вы перенаправлены. То, что вы должны сделать (или то, что я бы сделал), это добавить объект, который вы отправляете на сервер, в массив после получения 20-кратного ответа. Вот почему вы кешируете данные в слое внешнего интерфейса. Я бы не стал делать еще один звонок для поддержки всех данных.