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

问题描述

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

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

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

this.fields = [{名称:'名称'，类型:文本}，{名称:'年龄'，类型:'自定义'，customid:'Ctl1'}，{名称:'随便'，类型:'自定义'，customid:'Ctl2'}];//模板:<super-form [fields]="fields"><Ctl1><input type="number" ...><Ctl1><Ctl2><whatever-control ...><Ctl2></super-form>

在我的表单构建器组件中，我有如下内容:

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

但鉴于我在这里，这显然行不通.这是 ng2 限制吗?如果是这样，我想我可以硬编码说 5 个可选的内容元素并检查它们是否被指定并且没有动态选择，但这是一个黑客.

干杯

解决方案

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

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

更正
ng-content 仅用于静态投影.它的意思是快速转换".请查看这个问题了解更多信息

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>

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.

Cheers

解决方案

Since you are binding to a variable, please use the one way binding syntax like:

<ng-content [select]="f.customid"></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屋！