Şöyle bir bileşen seçici yeniden kullanmak istediğiniz selektör

Question

Açısal 2 Yeniden bileşeni:

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

Ama bir başka bileşeninde böyle ayarlarsanız bir şey gösterilmez:

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

Ben benim durumumdayılında yeniden kullanmak şablon zaman istediğiniz

Unexpected directive value 'undefined' 

: ben burada ayarlarsanız

ben de aşağıdaki hatayı alıyorum ne olursa olsun component yılında

Answer 1

bu ayarlayın:

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

Sen kullandığınız direktifler ne tür/bileşenleri bilmek angular2 izin @Component() arasında directives niteliğine expression-builder sınıf adını eklemek zorunda senin şablonu. Örneğin

expression-builder ait sınıfadı ExpressionBuilderComponent ve ebeveyn bileşenin sınıfadı böyle bir şey çıkacak ExpressionSetComponent ise:

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 { 

}