解析器无法使用 Angular Firestore 解析

Posted 2023-03-13

【中文标题】解析器无法使用 Angular Firestore 解析

【英文标题】：Resolver not resolving with 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()

【参考方案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))