使用 Angular 解析器从 Firebase 预加载数据

Question

第一次加载列表视图页面时一切顺利，列表已填充，我可以看到所有数据。 然后我导航到另一个视图以添加新对象，保存时我被重定向回列表视图。 再次登陆列表视图时，我可以看到列表元素片刻，然后它们消失，直到我刷新页面。

应该如何使用 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 组件。您应该做的（或我会做的）是添加对象，一旦收到 20x 响应，您将发送到后端的数组。这就是您在前端层缓存数据的原因。我不会再次调用 backed 来获取所有数据。