私はこのようになりますコンポーネントセレクタを再利用したいセレクタ

Question

角度2リユース部品：

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

：私はここでそれを設定した場合

は、私にはよく次のエラーを取得します

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

あなたはangular2があなたの中で使用しているディレクティブ/部品の種類を知っているように@Component()のdirectives属性にexpression-builderのクラス名を追加する必要があります。これを設定するものは何でもcomponentで

Answer 1

テンプレート。例えば

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 { 

}