Angular 2 Reuse Komponentenselektor

Question

Ich möchte eine Komponentenselektor wieder verwenden, die wie folgt aussieht:

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

Aber wenn ich es so in einer anderen Komponente zeigen, es wird nichts eingestellt:

@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] 
}) 

Wenn ich es hier gesetzt bekomme ich auch die folgenden Fehler:

Unexpected directive value 'undefined' 

ich mag die Vorlage erneut verwenden, wenn in meinem Fall valueType = Set

Answer 1

In welcher component stellen Sie dies:

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

Sie haben die Klassennamen expression-builder zum directives Attribute der @Component() hinzufügen zu lassen angular2 wissen, welche Art von Richtlinien/Komponenten, die Sie verwenden in Ihrem Vorlage.

Zum Beispiel, wenn der Klassenname des expression-builderExpressionBuilderComponent ist und die Klassennamen der übergeordneten Komponente ist ExpressionSetComponent Sie so etwas wie dieses:

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 { 

}