我有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>这里是
有人可以帮我这个忙吗,在这种情况下它怎么可能工作呢?
http ://www.syntaxsuccess/viewarticle/recursive-treeview-in-angular-2.0
解决方案如果您可以从指令中删除 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?
www.syntaxsuccess/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.
Plunker example
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意外的指令值“未定义”
发布评论