Angular 2 multiple TemplateRef

Question

Я пытаюсь создать пользовательский datagrid, который может отображать данные как в виде карт, так и в более традиционных таблицах/списках/сетках. Я могу сделать это довольно легко, если я не хочу, чтобы шаблоны настраивались, как показано в этом plunker

Здесь у меня есть компонент my-grid, который получает передаваемые данные. Тогда я петля над данными и визуализации компонента card-view или list-view в зависимости от желаемого зрения, которая находится под контролем view toggle (код в app/my-grid.ts файле)

Я хочу, чтобы предоставить возможность передавать в пользовательские шаблоны, и я имею в виду что-то например:

<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> 

Как я могу добраться до того, чего хочу, откуда я?

Answer 1

Я был в состоянии решить мою проблему, как показан 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) 
     } 
    } 

Надеется, что это помогает кому-либо еще, что сталкивается с подобной проблемой. Или, может быть, кто-то может мне точку на лучшее решение

Update: Для более новых версий NG2 (RC в момент написания этого), вам нужно будет использовать forwardRef() в некоторых случаях, как так:

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