Angular2 - 當注入循環引用的動態組件時，依賴注入不起作用

Question

我有一種情況，根據所選的輸入（無線電或復選框），我通過ajax動態添加一個組件。

Plunkr： https ：//plnkr.co/edit/uvGo3RxCkUPeuknVu9m8 ？ p = preview

我解釋了流程以便更好地理解：

第一層： src/parent/parent.ts

我們從questions.json獲取json響應並填充問題。

基於controlType我們在src/parent/parent.html加載a-component或b-component 。

當我在a-component選擇一個復選框或在b-component選擇一個單選按鈕時，我調用createDynamicComponent()並傳入componentData 。

componentData只是基於所選選項需要填充的下一個組件的元數據信息。

現在， componentData被傳遞到dynamic-component從src/controls/a.html或src/controls/b.html

在dynamic-component內部，我解析提供程序並將questions數據注入entryComponents（ a-component和b-component ）

一切都運行正常，直到我在a-component和b-component引入了HService （它包含組件數據構建邏輯）。

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

最后一個參數是b-component構造函數中的HService ，如果我取出服務並使用注釋代碼，一切正常。

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

編輯1：我已經將HService注入到a-component並且沒有提供程序解析錯誤，並且它正常工作。 只有在將其添加到b-component ，我才會面臨錯誤。

幫助將不勝感激!!

Answer 1

我認為問題是基於循環依賴。

A <=> HService和B <=> HService

為了解決這個問題，我將通過為HService創建抽象類來釋放依賴關系，並將其用作標記：

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) {

改良的Plunker