升级到 Angular 9 后，在扩展通用 Firestore 服务时出现错误答案

【问题标题】：Getting error in generic Firestore service while extending it, after upgrading to Angular 9升级到 Angular 9 后，在扩展通用 Firestore 服务时出现错误
【发布时间】：2020-02-18 15:04:29
【问题描述】：

我有一个封装 Angular Firestore 的通用类，然后我键入并扩展它以在我的应用程序中使用。升级到 Angular 9 后，这种安排不再有效。要查看我从哪里获得完整代码，请参阅 https://www.toptal.com/angular/state-management-in-angular-using-firebase。

抽象类包装器：

import { Inject } from '@angular/core';
import { AngularFirestore, QueryFn } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

export abstract class FirestoreService<T> {

    protected abstract basePath: string;

    constructor(
        @Inject(AngularFirestore) protected firestore: AngularFirestore,
    ) {

    }

     collection$(queryFn?: QueryFn): Observable<T[]> {
        return this.firestore.collection<T>(`${this.basePath}`, queryFn).valueChanges().pipe(
            tap(r => {
                if (!environment.production) {
                    console.groupCollapsed(`Firestore Streaming [${this.basePath}] [collection$]`);
                    console.table(r);
                    console.groupEnd();
                }
            }),
        );
    }
}

然后我将其扩展为：

import { Injectable } from '@angular/core';
import { FirestoreService } from 'src/app/core/services/firestore.service';
import { Employee } from '../models/employee';

@Injectable({
    providedIn: 'root'
})
export class EmployeeFirestore extends FirestoreService<Employee> {

    protected basePath: string = 'employees';

}

然后注入：

import { EmployeesPageStore } from './employees-page.store';
import { EmployeeFirestore } from './employee.firestore';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from '../models/employee';
import { tap, map } from 'rxjs/operators';

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

  constructor(
    private firestore: EmployeeFirestore,
    private store: EmployeesPageStore
  ) {
    this.firestore.collection$().pipe(
      tap(employees => {
        this.store.patch({
          loading: false,
          employees,
          totalEmployees: employees.length,
          totalDrivers: employees.filter(employee => employee.hasDriverLicense).length,
          totalRosarioEmployees: employees.filter(employee => employee.location === 'Rosario').length,
        }, `employees collection subscription`);
      })
    ).subscribe();
  }

如上所述，这在 Angular 8 中运行良好，但在 Angular 9 中出现以下错误（在开发人员工具中）：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'collection' of undefined
TypeError: Cannot read property 'collection' of undefined
    at EmployeeFirestore.collection$ (firestore.service.ts:30)
    at new EmployeesService (employees.service.ts:17)
    at Object.EmployeesService_Factory [as factory] (employees.service.ts:119)
    at R3Injector.hydrate (core.js:16765)
    at R3Injector.get (core.js:16526)
    at NgModuleRef$1.get (core.js:35567)
    at Object.get (core.js:33358)
    at getOrCreateInjectable (core.js:5470)
    at Module.ɵɵdirectiveInject (core.js:20777)
    at NodeInjectorFactory.EmployeesSummaryComponent_Factory [as factory] (employees-summary.component.ts:10)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40772)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
    at invokeTask (zone-evergreen.js:1596)

【问题讨论】：

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

【解决方案1】：

此错误是由构造函数中的firestore未初始化的抽象类引起的。我认为您不必这样做，这是某个地方的错误，但是如果您将 @Injectable() 装饰器添加到抽象类中，则firestore会在扩展类中正确初始化。

【讨论】：