Angular2-将依赖项注入到循环引用的动态组件中时不起作用 [英] Angular2 - Dependency injection not working when injected into a dynamic component of cyclic reference

问题描述

我遇到一种情况，根据所选的输入(单选或复选框)，我会通过ajax动态添加组件.

I have a situation where based on the input selected (radio or checkbox), I add a component dynamically through ajax.

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

我解释流程以更好地理解:

I explain the flow for better understanding:

第一层:src/parent/parent.ts

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

We get the json response from questions.json and populate the questions.

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

Based on the controlType we load either a-component or b-component in src/parent/parent.html.

当我选择a-component中的复选框或b-component中的单选按钮时，我会呼叫createDynamicComponent()并传递componentData.

When I select a checkbox in a-component or a radio button in b-component, I call createDynamicComponent() and pass in the componentData.

componentData只是基于所选选项的，需要填充的下一个组件的元数据信息.

componentData is nothing but the metadata information on the next component that needs to be populated, based on the selected option.

现在，componentData从src/controls/a.html或src/controls/b.html

在dynamic-component内部，我解析了提供程序并将questions数据注入到entryComponents(a-component和b-component)

Inside dynamic-component, I resolve the provider and inject the questions data into the entryComponents, (a-component and b-component)

一切正常，直到我在a-component和b-component内都引入了HService(用于保存组件数据构建逻辑).

Everything was working fine, until I introduced a HService (which holds the component data building logic) inside both a-component and b-component.

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

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

The last parameter being the HService inside the constructor of b-component, If I take out the service and use the commented code, everything works fine.

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

我已经将HService注入到a-component中，并且没有提供程序解析错误，并且可以正常工作.仅在将其添加到b-component时，我会遇到错误.

Edit 1: I have the HService injected into a-component already and there is no provider resolve error and it is working fine. Only on adding it to b-component, I face the error.

我们将不胜感激！

推荐答案

我认为问题是基于循环依赖性的.

I think the problem is based on circular dependencies.

A <=> HService和B <=> HService

要解决此问题，我将通过为HService创建抽象类并将其用作令牌来释放依赖项:

To solve it i would unleash dependencies by creating abstract class for HService and use it as 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

这篇关于Angular2-将依赖项注入到循环引用的动态组件中时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！