Angular 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 {

}