Question

您好我试图在我的Web应用程序中实现firestore，当我向构造函数添加服务时出现错误：

NullInjectorError：没有TesteventService的提供者！

我使用Angular 5，angularfire2 / firestore和typescript 2.7.1

testevent.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore'

@Injectable()
export class TesteventService {

  constructor(private afs: AngularFirestore) { }

  addEvent(eventData){
    this.afs.collection('testevent').add(eventData).then(() => {
      console.log('Done');
    })
  }

  getEvent(){
    return this.afs.collection('testevent', ref => ref.orderBy('id')).valueChanges()
  }
}

component.ts

import { Component, OnInit } from '@angular/core';
import { TesteventService } from '../../providers/testevent.service';
import { AngularFirestore } from 'angularfire2/firestore';

export class CsvImportComponent implements OnInit {
  data_rows = []

  constructor(private event: TesteventService){})

当我从TesteventSerivice添加事件时，我得到了错误，而没有运行任何内容。

Answer 1

您需要在app.module.ts

中的导入下的提供商下添加TesteventService

providers: [
  TesteventService 
]

Answer 2

用-注释您的服务类别

@Injectable（{提供者：'root'}）服务本身是CLI生成的类，并用@Injectable（）装饰。默认情况下，此装饰器具有ProvideIn属性，该属性为服务创建一个提供程序。在这种情况下，providerIn：'root'指定Angular应该在根注入器中提供服务。

Answer 3

这是我如何解决如何将运行时参数传递给另一个自定义库的一部分的角度服务的问题

很难确定在哪里以及如何提供注入参数

这里我的 AuthService 是另一个库的一部分我使用了 providedIn: 'root' 因为我的服务需求是将它定义为单例服务。有很多方法可以实现...

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

 constructor(
        @Inject('defaultUserName') private defaultUserName: string,
        @Inject('defaultPassword') private defaultPassword: string
    ) {
      // Now you can use injected parameters
        console.log("defaultUserName", defaultUserName);
        console.log("defaultPassword", defaultPassword);
      
    }

  // More code and methods

}

这是我如何在我的项目中使用上述服务

import { CoreApiModule } from 'my-library/app';
import { **AuthService** } from 'my-library/app/api/auth.service';

@NgModule({
    imports: [
        CoreApiModule
    ],

    declarations: [
    ],

    bootstrap: [AppComponent],
    providers: [
        AuthService,
        {
            provide: 'defaultUserName',
            useValue: Constants.userName,
        },
        {
            provide: 'defaultPassword',
            useValue: Constants.defaultPassword,
        }
    ]
})
export class AppModule {}

现在您可以在任何组件中直接导入 AuthService 并开始使用它。

Answer 4

解决这个问题有两种可能：

您可以像这样在 app.module.ts providers 数组中提供您的服务名称，错误就会消失：

<块引用>

imports: [
],

declarations: [
],

providers: [  TesteventService ]

对于某些最新版本的 angular，您可以通过这种方式简单地注释您想要的服务：

<块引用>

@Injectable({ providedIn: 'root' })

Angular 5，NullInjectorError：没有服务提供者

4 个答案: