javascript - Angular2 - 依赖注入(inject)在注入(inject)循环引用的动态组件时不起作用

Question

我有一种情况，根据选择的输入(单选框或复选框)，我通过 ajax 动态添加一个组件。

Plunkr:https://plnkr.co/edit/uvGo3RxCkUPeuknVu9m8?p=preview

为了更好地理解，我解释一下流程:

第一层:src/parent/parent.ts

我们从 questions.json 获取 json 响应并填充问题。

基于controlType我们加载 a-component或 b-component在 src/parent/parent.html .

当我在 a-component 中选中一个复选框时或 b-component 中的单选按钮，我调用createDynamicComponent()并传入 componentData .

componentData只是根据所选选项需要填充的下一个组件的元数据信息。

现在，componentData被传递到 dynamic-component来自 src/controls/a.html或 src/controls/b.html

内部dynamic-component ，我解析提供者并注入(inject) questions数据进入 entryComponents，(a-component 和 b-component)

一切正常，直到我引入一个 HService (包含组件数据构建逻辑)在 a-component 中和 b-component .

我收到以下错误，Error: Can't resolve all parameters for BComponent: ([object Object], [object Object], ?)

最后一个参数是 HService在 b-component 的构造函数中，如果我取出服务并使用注释代码，一切正常。

this.componentData = {
  'questions': {
    "question": "This is a " + this.level + " level question?",
    "controlType": "radio",
    "answers": [
        "Yes",
        "No",
        "None"
    ]
  },
  "component": BComponent,
  "level": this.level
};

编辑 1: 我有 HService注入(inject) a-component已经并且没有提供者解决错误并且工作正常。仅将其添加到 b-component ，我遇到了错误。

帮助将不胜感激!!

Answer 1

我认为问题是基于循环依赖。

A <=> HService和 B <=> HService

为了解决这个问题，我将通过为 HService 创建抽象类来释放依赖性并将其用作 token :

base.h.ts

export abstract class BaseHService {
    private componentData: any;

    abstract getComponentData(queries: IQ[], level: number): any;
}

app.module.ts

providers: [ 
  { provide: BaseHService, useClass: HService }, <== this line
  { provide: 'questions', useValue: {} }, 
  { provide: 'level', useValue: 1 }
],

a.ts

import { BaseHService } from "../h/base.h";
...
constructor(...private _h: BaseHService) {

b.ts

import { BaseHService } from "../h/base.h";
...
constructor(...private _h: BaseHService) {

Modified Plunker