关于angular:记录遇到的一个循环依赖问题

9次阅读

共计 2386 个字符，预计需要花费 6 分钟才能阅读完成。

最近想应用一个 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 抽象类的子类都必须实现该办法。

尽管不晓得为什么他说这样做能够解决循环依赖问题，然而通过我尝试之后，很显著没有用。

之后想起了之前我的项目中，解决 formControl 组件循环依赖个别通过 providers。

 providers: [
    {
      provide: NG_VALUE_ACCESSOR, multi: true,
      useExisting: forwardRef(() => {return VehicleColourSelectComponent;})
    }
  ]

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

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

在 Angular 中有很多形式能够将服务类注册到注入器中:

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

@Injectable 中的 providedIn 属性


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

providedIn: ‘root’ 通知 Angular 在根注入器中注册这个服务。

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

@NgModule 中的 providers 属性

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

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

注入的辨认是通过参数的字符名称 token，所以
{provide: HeroService, useValue: HeroService} 的 provide 就是咱们设置的名称 token, useValue 示意应用哪个服务。

若名称与 service 名雷同，咱们也能够简化, 间接应用 HeroService。

@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。

至于为什么应用 ThyNotifyService，会造成循环依赖，应用另一个 ThyDialog 就不会

为什么 privide 能解决循环依赖等问题，因为最近比较忙, 等之后有工夫再补充。

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

正文完