无法弄清楚要导入哪些模块才能使服务与 Angular 中的 Firestore 配合使用

Question

我做了一个非常基本的服务，如下所示：

@Injectable({
    providedIn: "root"
})
export class ItemService {
    private db!: CollectionReference<DocumentData>;

    constructor(private firestore: Firestore) {
        this.initDb();
    }

    private initDb() {
        if (this.firestore) {
            this.db = collection(this.firestore, "items");
        }
    }

    getItems(): Observable<Item[]> {
        if (this.db) {
            return collectionData(this.db).pipe(
                map((items: DocumentData[]) => {
                    return items.map((item: DocumentData) => item as Item);
                })
            );
        } else {
            return new Observable();
        }
    }
}

这就是我想要使用它的方式：

export class HomeComponent implements OnInit {
    item$: Observable<Item[]> | null = null;
    db: CollectionReference<DocumentData> | undefined;

    constructor(private itemService: ItemService) {}

    ngOnInit(): void {
        this.item$ = this.itemService.getItems();
    }
}

所以没有什么不寻常的。 问题是我在控制台中收到错误。

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ItemService -> ItemService -> Firestore -> Firestore]:  NullInjectorError: No provider for Firestore!

所以我将 ItemService 包含在提供者数组中：

@NgModule({
    declarations: [HomeComponent, CarouselComponent],
    imports: [CommonModule, RouterModule.forChild(routes), FormsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatCardModule],
    providers: [ItemService],
    bootstrap: []
})
export class HomeModule {}

然后控制台说：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ItemService -> Firestore -> Firestore -> Firestore]:  NullInjectorError: No provider for Firestore! NullInjectorError: R3InjectorError(HomeModule)[ItemService -> Firestore -> Firestore -> Firestore]

因此我还使用此导入包含了 Firestore：

import { Firestore } from "@angular/fire/firestore";

现在控制台显示：

Error: NG0204: Can't resolve all parameters for Firestore

我一生都不知道如何正确导入东西。 我在

HomeModule

中包含了它要求的提供程序，因为该应用程序是延迟加载的，但我也尝试在

AppModule

中执行此操作，并且得到了相同的结果。

这也是 Firebase 在

AppModule

中的处理方式：

@NgModule({
    declarations: [AppComponent, NavigationComponent],
    imports: [BrowserModule, AppRoutingModule, MatIconModule, BrowserAnimationsModule,
        provideFirebaseApp(() => initializeApp(firebaseConfig)),
        provideFirestore(() => getFirestore())],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

我认为还需要注意的是，一开始我没有使用服务，但我正在初始化所有内容，并且我正在组件内从 Firestore 中获取项目，并且一切都工作正常。 当我尝试将所有功能转移到单独的服务中时，问题就开始了。

我正在使用

"@angular/core": "^16.2.3",
"@angular/fire": "^7.6.1",

Answer 1

看起来我必须用这个替换导入：

import { DocumentData, Firestore, collection, collectionData } from "@angular/fire/firestore";