关于依赖注入的问题

来源：5-5 Http 拦截器 HttpInterceptor

christina976

2019-06-23

我在本地跑这个分支：5.4-HttpClient。
home.service.ts中是这样写的, 注入到全局。

Injectable({
  providedIn: 'root'
})
export class HomeService {
}

然后我做测试，将HomeService注入到HomeModule, 但是这样子run的话会报错。

@Injectable({
  providedIn: HomeModule
})
export class HomeService {
}

图片描述

然后我又继续做测试：将home.service.ts换成这样:

@Injectable()
export class HomeService {
}

然后在home.module.ts中更改providers如下，也就是在原来的providers基础上添加了HomeService,然后运行一切正常。

providers: [{ provide: token, useValue: 'http://localhost' }, HomeService]

我想问的是为什么之前那步会报错？依赖注入这块还是不太懂。。谢谢。

写回答

1回答

接灰的电子产品

2019-06-23

报错是因为循环引用编译没通过，如果想使用 providedin 某个 module，得再加一个模块绕过循环引用。所以实际工作中我们对于这个模块的service都是使用 providers 数组，而不是 providedin。

如果想使用 providedIn: xxxModule

可以这样

import { Injectable, NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ImageSlider, Channel, TopMenu } from 'src/app/shared/components';
import { environment } from 'src/environments/environment';

@NgModule()
export class ServiceModule {}

// 引入一个新模块避免循环引用
@Injectable({
providedIn: ServiceModule
})
export class HomeService {
constructor(private http: HttpClient) {}
getBanners() {
return this.http.get<ImageSlider[]>(`${environment.baseUrl}/banners`, {
params: { icode: `${environment.icode}` }
});
}
getChannels() {
return this.http.get<Channel[]>(`${environment.baseUrl}/channels`, {
params: { icode: `${environment.icode}` }
});
}
getTabs() {
return this.http.get<TopMenu[]>(`${environment.baseUrl}/tabs`, {
params: { icode: `${environment.icode}` }
});
}
}

然后在 HomeModule 中 imports 中，列出这个 ServiceModule

@NgModule({
declarations: [
HomeContainerComponent,
HomeDetailComponent,
HomeGrandComponent,
HomeAuxComponent,
ParentComponent,
ChildComponent
],
// 传统写法，如果采用这种写法，就不能在 service 中写 `providedIn`
// providers: [{ provide: token, useValue: 'http://localhost' }],
imports: [SharedModule, HomeRoutingModule, ServiceModule]
})
export class HomeModule {}

Angular 开发拼多多webapp 从基础到项目实战

高仿拼多多WebApp，带你在实战环境中学习Angular

1322 学习 · 451 问题

查看课程

相似问题

依赖注入和数据剥离

回答 1

關於 Http攔截器問題

回答 2

token使用的问题

回答 1

请问老师关于注解

回答 1

constructor（）里面添加 private rd2:Renderer2，后页面控制台就报错

回答 1

打开慕课网App查看更多内容