NG-含量的选择变量绑定

Question

我试图创建一个使用角度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可选内容元素，并检查他们是否指定，并没有动态选择，但这是一个黑客。

干杯

Answer 1

既然你绑定到一个变量，请使用单向绑定语法，如：

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

修正
ng-content是静态投影仅。它意味着快速“transcluding”。更多信息

Answer 2

，如果你换一个<template>元素的内容你可以做到这一点已经请检查this issue。

// renders the template 
// `item` is just an example how to bind properties of the host component to the content passed as template 
@Directive({ 
    selector: '[templateWrapper]' 
}) 
export class TemplateWrapper implements OnChanges { 

    private embeddedViewRef:EmbeddedViewRef<any>; 

    @Input() 
    private item:any; 

    constructor(private viewContainer:ViewContainerRef) { 
    console.log('TemplateWrapper'); 
    } 

    @Input() templateWrapper:TemplateRef<any>; 

    ngOnChanges(changes:{[key:string]:SimpleChange}) { 
    if (changes['templateWrapper']) { 
     if (this.embeddedViewRef) { 
     this.embeddedViewRef.destroy(); 
     } 
     console.log('changes', changes); 
     this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateWrapper, {item: this.item}); 
    } 

    if (this.embeddedViewRef) { 
     console.log('context', this.embeddedViewRef.context); 
     this.embeddedViewRef.context.item = this.item; 
    } 
    } 
} 

// just some component that is used in the passed template 
@Component({ 
    selector: 'test-component', 
    styles: [':host { display: block; border: solid 2px red;}'], 
    directives: [TemplateWrapper], 
    template: ` 
<div>test-comp</div> 
<div>prop: {{prop | json}}</div> 
    ` 
}) 
export class TestComponent { 
    @Input() prop; 

    constructor() { 
    console.log('TestComponent'); 
    } 
} 

// the component the `<template>` is passed to to render it 
@Component({ 
    selector: 'some-comp', 
    directives: [TemplateWrapper], 
    template: ` 
<div>some-comp</div> 
<div *ngFor="let f of fields"> 
    <div [ngSwitch]="f.type"> 
    <span *ngSwitchCase="'custom'">   
     <template [templateWrapper]="template" [item]="f" ></template> 
    </span> 
    </div> 
</div> 
    ` 
}) 
export class SomeComponent { 

    constructor() { 
    console.log('SomeComponent'); 
    } 

    @ContentChild(TemplateRef) template; 

    fields = [ 
    {name: 'a', type: 'custom'}, 
    {name: 'b', type: 'other'}, 
    {name: 'c', type: 'custom'}]; 
} 

// the component where the `<template>` is passed to another component 
@Component({ 
    selector: 'my-app', 
    directives: [SomeComponent, TestComponent], 
    template: ` 
<some-comp> 
    <template let-item="item"> 
    <div>some content</div> 
    <div>item: {{item | json}}</div> 
    <test-component [prop]="item"></test-component> 
    </template> 
</some-comp> 
    `, 
}) 
export class App { 
    constructor() { 
    console.log('AppComponent'); 
    } 
} 

Plunker example

Answer 3

我知道这是一个老问题，但是这是第一个地方之一此功能在搜索时我登陆所以我会补充我如何解决它。

ngContent仅用于静态投影，因此您不能使用它来执行任何绑定。如果您需要绑定您的计划内容，则可以使用ngTemplateOutlet和ngOutletContext。

用法示例：

<my-component> 
    <template let-item="item"> 
     <h1>{{item?.label}}</h1> - <span>{{item?.id}}</span> 
    </template> 
</my-component> 

里面MyComponent的，你可以使用ContentChild访问模板：

@ContentChild(TemplateRef) templateVariable: TemplateRef<any>; 

然后你的组件模板里，你传递给ngTemplateOutlet这样的：

<div *ngFor="let item of list"> 
    <template [ngTemplateOutlet]="templateVariable" [ngOutletContext]="{item: item}"></template> 
</div> 

ngOutletContext是可选的，但它允许您创建对象您将在模板中绑定。请注意，我在上下文对象中创建了一个属性item。这匹配我放在模板上的名称：let-item="item"

现在my-component的使用者可以传入模板以用于列表中的每个项目。

贷款： 这answer带领我在正确的方向。