Angular 2意外的指令值'undefined'

Question

我有2个组件，我想在另一个组件中重复使用，所以这是我想要重用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]
})

比我有这样的ExpressionComponent：

    @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>

这是 PLUNKR ，它应该显示两次测试，因为我使用了<expression-builder>两次。

在我的项目中，它显示为一个空元素，在此屏幕截图中，您可以看到它是如何呈现出来的：

有人可以帮我解决这个问题，在这种情况下它是如何工作的？

http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 1

如果从指令中删除ExpressionBuilderComponent，则错误消失：

@Component({
    selector: 'expression',
    ...
    //    directives: [ExpressionBuilderComponent]
})
export class ExpressionComponent implements OnInit {

如果有必要，我不知道解决方案。 TypeScript中类之间的AFAIK循环依赖关系只能使用接口来解析，我不知道这对directives有何用处。

Plunker example

顺便说一句：这就是你的Plunker应该是这样的。一个允许重现问题的最小例子。您添加了许多与问题完全无关的代码。