解析器无法使用 Angular Firestore 解析答案

【问题标题】：Resolver not resolving with angular firestore解析器无法使用 Angular Firestore 解析
【发布时间】：2019-01-24 22:50:43
【问题描述】：

我添加了一个解析器，以便在用户登录后从 Cloud Firestore 获取用户信息。但是，解析器没有完成，视图也没有被渲染。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument
} from 'angularfire2/firestore';
import {AngularFireAuth} from 'angularfire2/auth';

import { map } from 'rxjs/operators';

@Injectable()
export class LoginUserResolve implements Resolve<any> {

  usersCollection: AngularFirestoreCollection<any>;
  users: any;
  userDoc: AngularFirestoreDocument<any>;

  constructor(public afs: AngularFirestore, public afAuth: AngularFireAuth) {
    this.usersCollection = this.afs.collection('users');
  }

  resolve(route: ActivatedRouteSnapshot) {
    const email = this.afAuth.auth.currentUser.email;
    console.log('Email: ', email);
    return this.afs.collection('users', ref => ref.where('email', '==', email)).snapshotChanges().pipe(
      map(actions => actions.map(proj => {
        const data: any = proj.payload.doc.data();
        data.id = proj.payload.doc.id;
        return data;
      })));
  }
}

在控制台日志中，我看到正在记录用户的电子邮件，之后我没有看到来自组件的任何日志。

【问题讨论】：

您是否测试过返回是否有效（如果它真的在您订阅时返回数据）？
是的，我在向解析器添加日志时看到了数据。我看到了查询返回的文档
我遇到了同样的问题。非常令人沮丧。您不能在 resolve 方法中返回尚未完成的 observables。如果您要在地图运算符之后添加 take(1)，您可能会发现它有效。不幸的是，您现在有一个与 Firestore 断开连接的死 Observable。我仍在尝试了解将 Firestore 与 Resolver 一起使用的惯用方式是什么。最令人沮丧的是，它默默地失败了。
只是添加注释。尝试不要为解析器流式传输数据。使用get() 而不是snapshotChanges()

标签： angular typescript firebase observable google-cloud-firestore

【解决方案1】：

这是我的解决方法，我在 firestore observable 返回后添加了一个缓存列表。并在下一次解析调用时将其作为承诺返回。虽然我真的认为它应该由 firebase 团队修复。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { first } from 'rxjs/operators';
import { CurrencyApiService, ICurrency } from '../services/currency-api.service';

@Injectable()
export class CurrencyResolver implements Resolve<ICurrency[]> {
    private list: ICurrency[] = [];
    constructor(
        private service: CurrencyApiService
    ) {}

    resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): any {
        if (this.list.length > 0) {
            return new Promise(resolve => resolve(this.list));
        } else {
            const doc = this.service.filteredCurrencies.pipe(first()).toPromise();
            return doc.then(data => {
                this.list = data;
                return data;
            });
        }
    }
}

【讨论】：

【解决方案2】：

@Morilla Thaisa 几乎回答了 cmets 中的问题。

但是，我想我会想出一个例子来说明它的外观。我自己在我的项目中使用它并且像一个魅力一样工作。尽管如此，我认为 AngularFire 团队可以改进返回的对象，但这不取决于我，可能有使用 RxJS 运算符的解决方法，但我不确定。

路由模块

    {
      path: "about",
      component: AboutComponent,
      resolve: {
        about: AboutResolver
      }
    },

服务

  getAll<T>(c: string): Observable<QuerySnapshot<T>> {
    this.increaseRequestsMade();
    return this.firestore.collection<T>(c).get();
  }

解析器

export class AboutResolver implements Resolve<QuerySnapshot<About>> {
  constructor(private aboutService: AboutService) {}

  resolve(
    _route: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot
  ): Observable<QuerySnapshot<About>> | QuerySnapshot<About> {
    return this.aboutService.getAll<About>();
  }
}

组件

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    const aboutArray: About[] = this.route.snapshot.data.about.docs.map(d => d.data())
  }

【讨论】：

【解决方案3】：

我实际上在解析器中解决了所有问题。通过提供一个 Observable，当初始 Observable 本身发送其第一个值时完成。

因此，我没有返回数据，而是返回将发出值的 observable。为了确保至少发出 1 个值，我使用 delayWhen 运算符。触发 delayWhen 后，我确保使用 take(1) 完成 trigger-Observable

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Observable<Company>> {
        return of(this._companyService.company$).pipe(
            delayWhen(_ => this._companyService.company$.pipe(take(1))),
        );
    }

注意：CompanyService.company$ 是 ReplaySubject<Company>(1)。或者你可以确保你pipe(shareReplay(1))

【讨论】：