2角多TemplateRef [英] Angular 2 multiple TemplateRef

问题描述

我想建立一个自定义的数据表格，可以显示无论是作为卡或更多的臣民表/表/网格数据。我能做到这一点很容易pretty如果我不想如本 plunker

I am trying to build a custom datagrid that can display data either as cards or the more tradional table/list/grid. I can do it pretty easily if I do not want the templates to be customizable as shown in this plunker

在这里，我有一个我的网获取传递呈现的数据组件。然后，我在数据环和渲染卡视图或列表视图部件根据所需的看法是由视图切换控制（code在应用程序/我-grid.ts 文件）

Here I have a my-grid component that gets passed the data to be rendered. Then I loop over the data and render the card-view or list-view component depending on the desired view which is controlled by the view toggle (code in app/my-grid.ts file)

我要提供自定义模板传递的能力，我想是这样的：

I want to provide the ability to pass in custom templates and I am thinking something like this:

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

我要如何才能到达我想从我在哪里？

How can I get to what I want from where I am at?

推荐答案

我能解决我的问题，如图这里

I was able to solve my issue as shown 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)
      }
    }

希望它可以帮助别人说正面临着类似的问题。或者，也许有人能指出我到一个更好的解决方案。

Hope it helps anyone else that is facing a similar problem. Or maybe someone can point me to a better solution

这篇关于2角多TemplateRef的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！