Angular 2意外的指令值'未定义'

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，它应该显示 Test 两次，因为我使用了两次 <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 的样子。允许重现问题的最小示例。您添加了许多与问题完全无关的代码。