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帶領我在正確的方向。