Angular2 - 当注入循环引用的动态组件时，依赖注入不起作用

Question

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:

First Layer: src/parent/parent.ts

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

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

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

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

Now, the componentData is passed into the dynamic-component from src/controls/a.html or src/controls/b.html

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

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

I am getting the following error, Error: Can't resolve all parameters for BComponent: ([object Object], [object Object], ?)

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 }; 

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.

Help will be much appreciated!!

Answer 1

I think the problem is based on circular dependencies.

A <=> HService and B <=> 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