记录遇到的一个循环依赖问题

最近想使用一个service的时候报了循环依赖的问题。

官方指导给的调用方法很简单，在构造函数中添加notifyService,然后直接调用即可。

export class ThyNotifyBasicExampleComponent implements OnInit {
    constructor(private notifyService: ThyNotifyService) {}

    ngOnInit() {}

    showDefault() {
        this.notifyService.show({
            title: '添加项目成功！'
        });
    }
}

但是我在使用的时候却报了notifyService的循环依赖。
NG0200: Circular dependency in DI detected for ThyNotifyService
如图

---

尝试解决：

上谷歌搜索后，最开始尝试了这种方法： 构造函数里构造的是Injector,
接着在函数给定义的属性赋值。

private payrollService:PayrollService;
constructor(injector:Injector) {
  setTimeout(() => this.payrollService = injector.get(PayrollService));
}

---

在 Angular 中 Injector (注入器) 用来管理服务对象的创建和获取,
Injector 抽象类中定义了一个 get() 抽象方法，该方法用于根据给定的 Token 从注入器中获取相应的对象，每个Injector 抽象类的子类都必须实现该方法。

虽然不知道为什么他说这样做可以解决循环依赖问题，但是经过我尝试之后，很明显没有用。

---

Provide:

根据报错NO provide xxx, 可以猜测是因为没有提供某个类

发现自己突然对provide注入忘得差不多了。于是大概讲一下

AngularJS文档对provider的定义:
provider是一个带有$get()方法的对象。injector调用$get方法创建一个新的service

在Angular中有很多方式可以将服务类注册到注入器中:

@Injectable 中的providedIn属性
@NgModule 中的 providers属性
@Component 中的 providers属性

1. @Injectable 中的providedIn属性

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

providedIn: 'root' 告诉 Angular在根注入器中注册这个服务。

若这种方式注册,就不用在 @NgModule 装饰器中写 providers 。并且在代码编译打包时, 会进行摇树优化，会移除所有没在应用中使用过的服务。比较推荐。

2. @NgModule 中的 providers属性

@NgModule({
    providers: [
        HeroService,
       // { provide: HeroService, useClass: HeroService }
    ],

若service中没有在根注入器中注入该服务，若我们想在组件中使用service，就需要使用手动注入service。

注入的识别是通过参数的字符名称token， 所以
{ provide: HeroService, useClass: HeroService } 的 provide就是我们设置的名称token, useValue表示使用哪个服务。

若名称与service名相同，我们也可以简化,直接使用HeroService。

3. @Component 元数据中的 providers属性

// service.ts
@Injectable() 
 
// component.ts
@Component({
  ...
  selector: 'app-heroes',
  providers: [ HeroService ]
})

这种方式和@NgModule差不多。

---

由于不知道我引用的外置service是否注入了根注入器，我先假设它没有注入，于是手动在@NgModule中注入了一下。代码如下。

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    IndexModule,
    LabelRoutingModule,
  ],
  providers: [
    ThyNotifyService
  ]
})

注入之后报错依旧。

最后解决方式：

最后尝试了很多次，
解决方式是在providers ThyNotifyService的基础上再引入一个ThyNotifyModule。如下第7和10行。

1 @NgModule({
2   declarations: [],
3   imports: [
4     CommonModule,
5     IndexModule,
6     LabelRoutingModule,
7     ThyNotifyModule
8   ],
9   providers: [
10    ThyNotifyService
11  ],
})

由于不太清楚这些外置组件库的实现方式，最后也没太搞懂为什么使用ThyNotifyService 需要引入ThyNotifyModule。

官方也没写清楚需要引入这个。所以也试了不久。

可能是有些东西依赖ThyNotifyModule。

至于为什么privide能解决循环依赖等问题，由于最近比较忙,等之后有时间再补充。

参考：
https://blog.csdn.net/sllailc...
https://yuyang041060120.githu...

补充

后面发现不是循环依赖的问题，只是angular给我们报错成了循环依赖。

原因只是单纯地是No provider for ThyQueueStore。

只要提供了ThyQueueStore了就行。

后面我引入ThyNotifyModule, 可能误打误撞提供了ThyQueueStore。