ng-content选择绑定变量 [英] ng-content select bound variable

问题描述

我正在尝试使用angular 2创建一个表单生成器.一个非常基本的示例如下:

I'm trying to create a form builder using angular 2. An very basic example is as follows:

this.fields = [{name: 'Name', type: 'text'}, {name: 'Age', type: 'number'}];

但是我也想支持自定义元素，例如:

But I also want to support custom elements like:

this.fields = [
  {name: 'Name', type: text}, 
  {name: 'Age', type: 'custom', customid: 'Ctl1'},
  {name: 'Whatever', type: 'custom', customid: 'Ctl2'}
];
// template:
<super-form [fields]="fields">
  <Ctl1><input type="number" ...><Ctl1>
  <Ctl2><whaterver-control ...><Ctl2>
</super-form>

在我的表单构建器组件中，我有类似的东西:

In my form builder component I then have something like:

<div *ngFor="let f of fields">
  <div [ngSwitch]="f.type">
    <span *ngSwitchWhen="'custom'">          
      <ng-content select="f.customid"></ng-content>
    </span>
  </div>
</div>

但是考虑到我在这里，这显然是行不通的.这是ng2的限制吗?如果是这样，我想我可以对5个可选内容元素进行硬编码，并检查它们是否已指定并且没有动态选择，但这是一个hack.

But given that I'm here this obviously does not work. Is this an ng2 limitation? If so, I guess I could hard code say 5 optional content elements and check if they are specified and not have dynamic selects but this is a hack.

欢呼

推荐答案

由于要绑定到变量，因此请使用单向绑定语法，例如:

<ng-content [select]="f.customid"></ng-content>

<ng-content [select]="f.customid"></ng-content>

更正
ng-content仅用于静态投影.它的意思是快速的包含".请查看此问题以获取更多信息

Correction
ng-content is for static projection only. It's meant to be fast "transcluding". Please check this issue for more info

这篇关于ng-content选择绑定变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！