[英]Angular 5, NullInjectorError: No provider for Service
Hello im trying to implement firestore into my web application, when i add the service to contructor the error:您好,当我添加服务来构造错误时,我正在尝试将 firestore 实现到我的 Web 应用程序中:
NullInjectorError: No provider for TesteventService!
NullInjectorError: 没有 TesteventService 的提供者!
I'm using Angular 5, angularfire2/firestore and typescript 2.7.1我正在使用 Angular 5、angularfire2/firestore 和 typescript 2.7.1
testevent.service.ts 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组件.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){})
When I add events from TesteventSerivice i get the error, while nothing is run.当我从 TesteventService 添加事件时,我收到错误消息,但没有运行任何内容。
You need to add TesteventService under providers under imports in your app.module.ts您需要在 app.module.ts 中的导入下的提供者下添加 TesteventService
providers: [
TesteventService
]
Annotate your service class with -使用 - 注释您的服务类
@Injectable({ providedIn: 'root' })
The service itself is a class that the CLI generated and that's decorated with @Injectable()
.服务本身是 CLI 生成的一个类,它用
@Injectable()
修饰。 By default, this decorator has a providedIn
property, which creates a provider for the service.默认情况下,这个装饰器有一个
providedIn
属性,它为服务创建一个提供者。 In this case, providedIn: 'root'
specifies that Angular should provide the service in the root injector.在这种情况下,
providedIn: 'root'
指定 Angular 应该在根注入器中提供服务。
Here is how i have solved my problem with how to pass runtime parameter to a angular service which is part of another custom library这是我如何解决如何将运行时参数传递给另一个自定义库的一部分的角度服务的问题
It was difficult to identify where and how to provide injected parameter很难确定在哪里以及如何提供注入参数
Here my AuthService is part of another library i used providedIn: 'root' because my service requirement was to define it as a singleton service.这里我的AuthService是我使用的另一个库的一部分providedIn: 'root' 因为我的服务要求是将它定义为单例服务。 And there are many ways to achieve that ...
有很多方法可以实现这一目标......
@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
}
Here is how i use above service in my project这是我在项目中使用上述服务的方式
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 {}
Now you can directly import AuthService in any component and start using it.现在你可以在任何组件中直接导入 AuthService 并开始使用它。
There are two possibilities to solve this problem:解决这个问题有两种可能:
imports: [ ], declarations: [ ], providers: [ TesteventService ]
@Injectable({ providedIn: 'root' })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.