Angular 2 multiple TemplateRef

Question

Sto provando a creare un datagrid personalizzato in grado di visualizzare i dati sia come schede che come tabella/lista/griglia più tradizionale. Posso farlo abbastanza facilmente se non voglio che i modelli siano personalizzabili come mostrato in questo plunker

Qui ho un componente my-grid che riceve i dati da rendere. Poi ho ciclo sui dati e rendere la componente card-view o list-view a seconda della vista desiderata che è controllata dal view toggle (codice in app/my-grid.ts file)

Voglio fornire la possibilità di passare a modelli personalizzati e sto pensando qualcosa così:

<my-grid> 
    <card-view-template> 
    <template var-item> 
     <h4>{{item.name}}</h4> 
     {{item.home}} 
    </template> 
    </card-view-template> 
    <list-view-template> 
    <template var-item> 
     <span>{{item.name}}</span> 
     {{item.home}} 
    </template> 
    </card-view-template> 
</my-grid> 

Come posso arrivare a quello che voglio da dove mi trovo?

Answer 1

sono stato in grado di risolvere il mio problema, come mostrato here

import {Component, Directive, ContentChild, TemplateRef} from 'angular2/core'; 

    @Directive({ 
     selector: 'card-view' 
    }) 
    export class CardViewComponent { 
     @ContentChild(TemplateRef) itemTmpl; 

     ngAfterContentInit() { 
     console.log('In CCV', this.itemTmpl) 
     } 
    } 

Speranza che aiuta chiunque altro che si trova ad affrontare un problema simile. O forse qualcuno mi può puntare a una soluzione migliore

Aggiornamento: Per le versioni più recenti di NG2 (RC al punto di scrivere questo), sarà necessario utilizzare forwardRef() in alcuni casi, in questo modo:

@ContentChild(forwardRef(() => CardViewComponent)) cardViewComponent; @ContentChild(forwardRef(() => ListViewComponent)) listViewComponent;