ionic-framework - 如何在组件中注入服务
问题描述
我有一个组件和服务,我尝试在组件中注入服务(ListUserService)。我导入服务,我请求它并收到错误,当我删除服务时它运行良好,错误是什么?
import { Component, OnInit } from '@angular/core';
import {ListUserService} from './list-user.service';
@Component({
selector: 'app-list-user',
templateUrl: './list-user.component.html',
styleUrls: ['./list-user.component.scss'],
providers: [ListUserService]
})
export class ListUserComponent implements OnInit {
constructor(private listUserService: ListUserService) {
console.log(this.listUserService);
}
}
这是服务:
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ListUserService {
constructor(public http: HttpClient) {
this.http.get(`http://localhost:8080/user/getUsers/`)
.subscribe(response => {
console.log(response);
});
}
}
这是错误: 错误
错误:StaticInjectorError(AppModule)[ListUserService -> HttpClient]: StaticInjectorError(Platform: core)[ListUserService -> HttpClient]: NullInjectorError: No provider for HttpClient!
这是文件 app.module.ts
import {HttpClient} from '@angular/common/http';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ListUserComponent} from './list-user/list-user.component';
import {ListUserService} from './list-user/list-user.service';
@NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
HttpClient,
StatusBar,
SplashScreen,
ListUserService,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule {
}
解决方案
您未能在导入中添加 HttpClientModuleapp.module.ts
import { ListUserComponent } from './list-user/list-user.component';
import { ListUserService } from './list-user/list-user.service';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule],
providers: [
StatusBar,
SplashScreen,
ListUserService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
推荐阅读
- java - 如何在片段中启动 TextView?
- javascript - 简单代码适用于 IE,但不适用于其他浏览器
- c# - 比较两个相同数据表的每一行以获取更改的值 C#
- maven - 如何在 Teamcity 上为 Maven 设置多个属性
- javascript - Puppeteer 在菜单点击时找不到选择器
- azure - Azure 数据工厂 v2 门户很慢
- java - Javac API - 在 ProcessingEnvironment 中指定编译单元
- haskell - 部分应用带有 map 的中缀运算符
- python - httplib2.ServerNotFoundError:无法在 accounts.google.com 上找到服务器
- python - 检查numpy数组python中的最后n个元素是否相等