Angular 2多个TemplateRef

Question

我正在尝试构建一个自定义数据网格,可以显示数据作为卡或更传统的表/列表/网格.如果我不希望模板可以自定义,我可以很容易地完成它,如此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

我能够解决我的问题，如下所示

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

希望它可以帮助其他面临类似问题的人。或者也许有人可以指出我更好的解决方案

更新：对于较新版本的 ng2（在撰写本文时为 RC），forwardRef()在某些情况下您需要使用如下所示：

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