角2重用組件選擇

Question

我想重新使用的組件選擇，看起來像這樣：

@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> 
`, 
}) 

但是，如果我在其他組件設置這樣它不會顯示任何東西：

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

<!-- Second Select --> 
    <div [ngClass]="{'col-xs-3': prototype?.valueType !== 'Set', 'col-xs-2': prototype?.valueType === 'Set'}" *ngIf="prototype"> 
     <select class="form-control" [(ngModel)]="expression.constraint"> 
      <option *ngFor="#constraint of prototype.constraints" [value]="constraint"> 
       {{ constraint }} 
      </option> 
     </select> 
    </div> 

<!-- Third Select --> 
    <div [ngClass]="{'col-xs-3': prototype?.valueType !== 'Set', 'col-xs-2': prototype?.valueType === 'Set'}"> 

     <div>{{expression | json}}</div> 
    </div> 
    <div class="col-xs-1"> 
     <a class="btn btn-danger pull-right" (click)="deleteExpression()"><i class="glyphicon glyphicon-remove"></i></a> 
    </div> 

    <!-- Expression Set selector --> 
    <div *ngIf="prototype?.valueType === 'Set'"> 
     <expression-builder></expression-builder> 
    </div> 
</div> 
`, 
directives: [ExpressionBuilderComponent] 
}) 

如果我在這裏把它我也收到以下錯誤：

Unexpected directive value 'undefined' 

我想重新使用該模板時，在我的案件valueType = Set

Answer 1

在任何component設置此：

<!-- Expression Set selector --> 
<div *ngIf="prototype?.valueType === 'Set'"> 
    <expression-builder></expression-builder> 
</div> 

你要的expression-builder添加類名的@Component()的directives屬性，讓angular2知道您使用的是什麼樣的指令/組件您模板。

舉例來說，如果expression-builder的類名是ExpressionBuilderComponent和父組件的類名是ExpressionSetComponent你會得到這樣的事情：

expression.set.component.ts

@Component({ 
    selector : 'expression-set', 
    template : ` 
    <div *ngIf="prototype?.valueType === 'Set'"> 
     <expression-builder></expression-builder> 
    </div> 
    `, 
    directives : [ 
    ExpressionBuilderComponent //<-- this is kinda important 
    ] 
}) 
export class ExpressionSetComponent { 

}