问题描述
我有2个组件,我想在另一个组件中重用,所以这是我要重用ExpressionBuilderComponent的组件:
@Component({
选择器:'expression-builder',
模板:`
< div class = container>
< * ngFor =#表达式的表达式 [prototypes] =原型 [expression] = expression [expressions] = expressions>< / expression>
< a class = btn btn- primary(click)= addExpression()< i class = glyphicon glyphicon-plus< / i>< / a>
< / div>
` ,
指令:[ExpressionComponent]
})
比我拥有ExpressionComponent像这样:
@Component({
选择器:'expression',
模板:`
< div class = row>
< ;!-首先选择->
< div class = col-xs-3>
< ; select class = form-control [(ngModel)] = selectedPrototypeSelector(ngModelChange)= onPrototypeChange()>
< option * ngFor =原型的#p [value] = p.selector>
{{p.selectorName}}
< / option>
< / select>
< / div>
<!-表达式集选择器->
< div * ngIf = prototype?.valueType ==='设置'>
< expression-builder>< / expression-builder>
< / div>
这里是
有人可以帮我这个忙吗,在这种情况下它怎么可能工作呢?
如果您可以从指令中删除 ExpressionBuilderComponent
,错误就会消失:
@Component( {
选择器:'expression',
...
//指令:[ExpressionBuilderComponent]
})
导出类ExpressionComponent实现OnInit {
如果有必要,我不知道解决方案。 TypeScript中类之间的AFAIK循环依赖关系只能使用接口来解决,我不知道如何使用指令
。
顺便说一句:这就是您的Plunker的外观。一个可以重现该问题的最小示例。您为与该问题完全无关的许多代码添加了方法。
I have 2 components, I want to re-use one in the other so this is the component I want to re-use the ExpressionBuilderComponent:
@Component({
selector: 'expression-builder',
template: `
<div class="container">
<expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expressions"></expression>
<a class="btn btn-primary" (click)="addExpression()"><i class="glyphicon glyphicon-plus"></i></a>
</div>
`,
directives: [ExpressionComponent]
})
Than I have the ExpressionComponent like this :
@Component({
selector: 'expression',
template: `
<div class="row">
<!-- First Select -->
<div class="col-xs-3">
<select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
<option *ngFor="#p of prototypes" [value]="p.selector">
{{ p.selectorName }}
</option>
</select>
</div>
<!-- Expression Set selector -->
<div *ngIf="prototype?.valueType === 'Set'">
<expression-builder></expression-builder>
</div>
Here is a PLUNKR and it should show Test twice because I use <expression-builder>
twice.
In my project it is showing as an empty element, In this screenshot you can see how it is rendered out:
Can someone please help me out on this, how is it possible that in this case it is working?
http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0
If you remove ExpressionBuilderComponent
from directives the error goes away:
@Component({
selector: 'expression',
...
// directives: [ExpressionBuilderComponent]
})
export class ExpressionComponent implements OnInit {
if it is necessary I don't know a solution. AFAIK circular dependencies between classes in TypeScript can only be resolve using interfaces and I don't know how that would work with directives
.
BTW: this is how your Plunker should have looked like. A minimial example that allows to reproduce the problem. You added way to much code that is entirely unrelated to the problem.
这篇关于Angular 2意外的指令值“未定义”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!