相关疑难解决方法(0)

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

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

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

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>

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

<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个可选的内容元素并检查它们是否被指定而没有动态选择,但这是一个黑客.

干杯

假设我有这个简单的列表渲染组件:

import {Input, Component } from 'angular2/core'

@Component({
  selector: 'my-list',
  template: `
      <div *ngFor='#item of items' (click)='onItemClicked(item)'>
          {{item}}
      </div>
  `
})
class MyList {
    @Input() items: string[];

    onItemClicked(item) { console.log('Item clicked:', item); }
}

我这样使用它:

  <my-list [items]='myAppsItems'></my-list>

到现在为止还挺好.

接下来我决定我希望用户能够为渲染项提供自己的模板,因此我更改了组件

@Component({
  selector: 'my-list',
  template: `
      <template ngFor [ngForOf]="items" [ngForTemplate]="userItemTemplate" (click)='onItemClicked(item)'>
      </template>
  `
})
class MyList {
    @Input() items: string[];
    @ContentChild(TemplateRef) userItemTemplate: TemplateRef;

    onItemClicked(item) { console.log('Item clicked:', item); }
}

并像这样使用它:

<my-list [items]='items'>
   <template #item>
        <h1>item: {{item}}</h1>
   </template>
</my-list>

这只适用于我没有将任何事件处理程序绑定到列表项(plunker).如果我尝试绑定到click事件,就像我在组件的第一个版本中所做的那样,Angular会抛出以下异常: …