Nie można uzyskać ngTemplateOutlet pracować

Question

Próbuję zbudować składnik wymienienie w Angular2 które ma elementy, kolumny i szablony dziedzinie przedmiotów od użytkownika komponentu. Tak próbuję użyć ngTemplateOutlet i ngOutletContext (które czytałem są eksperymentalne). Ale nie mogę zmusić go do działania.

Oto uproszczony komponent do wykazania, co próbuję zrobić:

<div *ngFor="let item of items> 
    <span *ngFor="let column of columns> 
    <template [ngOutletContext]="{ item: item }" 
       [ngTemplateOutlet]="column.templateRef"></template> 
    </span> 
</div> 

Oto Wykorzystanie składnika:

<my-component [items]="cars" [columns]="carColumns"> 
    <template #model>{{item.model}}</template> 
    <template #color>{{item.color}}</template> 
    <template #gearbox>{{item.gearbox}}</template> 
</my-component> 

A oto przykład dane:

cars = [ 
    { model: "volvo", color: "blue", gearbox: "manual" }, 
    { model: "volvo", color: "yellow", gearbox: "manual" }, 
    { model: "ford", color: "blue", gearbox: "automatic" }, 
    { model: "mercedes", color: "silver", gearbox: "automatic" } 
]; 

carColumns = [ 
    { templateRef: "model" }, 
    { templateRef: "color" }, 
    { templateRef: "gearbox" } 
]; 

Oto plunker odtwarzający problem po zaadaptowaniu kodu zgodnie z komentarzem Günters: https://plnkr.co/edit/jB6ueHyEKOjpFZjxpWEv?p=preview

Answer 1

ten sposób trzeba to zrobić:

@Component({ 
    selector: 'my-component', 
    template: ` 
    <div *ngFor="let item of items"> 
     <span *ngFor="let column of columns"> 
     <template [ngTemplateOutlet]="column.ref" [ngOutletContext]="{ item: item }"></template> 
     </span> 
    </div>` 
}) 
export class MyComponent { 
    @Input() items: any[]; 
    @Input() columns: any[]; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <my-component [items]="cars" [columns]="columns"> 
     <template #model let-item="item">{{item?.model}}</template> 
     <template #color let-item="item">{{item?.color}}</template> 
     </my-component> 
    </div>` 
}) 
export class App { 
    @ViewChild('model') model; 
    @ViewChild('color') color; 
    cars = [ 
     { model: "volvo", color: "blue" }, 
     { model: "saab", color: "yellow" }, 
     { model: "ford", color: "green" }, 
     { model: "vw", color: "orange" } 
    ]; 

    ngAfterContentInit() { 
    this.columns = [ 
     { ref: this.model }, 
     { ref: this.color ] 
    ]; 
    } 
} 

Plunker

Answer 2

zmiana kątowa 5

ngOutletContext został przemianowany na ngTemplateOutletContext

Zobacz także https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

oryginalny

Nie używaj [] i {{}} razem. Albo jeden, albo drugi, ale nie oba.

Nie używaj {{}}, jeśli chcesz przekazać obiekt, ponieważ {{}} służy do interpolacji napisów.

Powinno być

[ngTemplateOutlet]="column.templateRef" 

Plunker example