angular - 将 firestore 添加到 Angular 组件构造函数会引发 No provider 错误

Question

我正在尝试使用Google Firestore设置基本的 Angular 8 应用程序。我已经尝试了所有可用的解决方案，但找不到可以解决我遇到的错误的方法。运行应用程序时出现以下错误。

InjectionToken 平台 ID 没有提供者！

我究竟做错了什么？提前致谢。

这是我的 app.component.ts：

import { Component,OnInit } from '@angular/core';
import {WorkService} from 'src/app/work.service';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ysport';
  constructor(private db: AngularFirestore, workService:WorkService){}

  ngOnInit() {

  }


}

这是我的 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
import { WorksComponent } from './works/works.component';
import { WorkService } from "./work.service";


import { AngularFirestoreModule } from '@angular/fire/firestore';
@NgModule({
  declarations: [
    AppComponent,
    WorksComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [WorkService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我正在尝试使用的服务：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Work } from 'src/app/work.model';

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

  constructor(private firestore: AngularFirestore) { }

  getWorks() {
      return this.firestore.collection('works').snapshotChanges();
  }
}

标签： angulartypescriptfirebasegoogle-cloud-firestore

Answer 1

我要回答我自己的问题。我让它以这种方式工作，我从我的 app.component.ts 中删除了 AngularFirestore，在构造函数中将工作服务设置为私有：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import {WorkService} from '../work.service';

interface Work {
  name: string;
  desc: string;
  image: string;
}


@Component({
  selector: 'app-works',
  templateUrl: './works.component.html',
  styleUrls: ['./works.component.css']
})
export class WorksComponent implements OnInit {

  works: Observable<Work[]>;

  constructor(private workService: WorkService) { }

  ngOnInit() {
    this.works = this.workService.getWorks();
  }

}

这是我的 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WorksComponent } from './works/works.component';
import { ReactiveFormsModule } from "@angular/forms";

import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { WorksGifComponent } from './works-gif/works-gif.component';
import { WorkService } from './work.service';

@NgModule({
  declarations: [
    AppComponent,
    WorksComponent,
    WorksGifComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [WorkService],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 service.ts 中，我找到了一个带有 Observable 的示例，并通过在我的 Firestore 数据库中创建与集合的数据模型的接口：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFirestoreCollection } from '@angular/fire/firestore';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})

export class WorkService {

  worksCol: AngularFirestoreCollection<Work>;
  works: Observable<Work[]>;

  constructor(private afs: AngularFirestore) { }

  getWorks() {
    this.worksCol = this.afs.collection('works');
    this.works = this.worksCol.valueChanges();
    return this.worksCol.valueChanges();
  }
}

interface Work {
  name: string;
  desc: string;
  image: string;
}

这有效，希望它可以帮助某人。谢谢