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屋!