Góc 2 nhiều TemplateRef

Question

Tôi đang cố tạo một DataGrid tùy chỉnh có thể hiển thị dữ liệu dưới dạng thẻ hoặc bảng/danh sách/lưới truyền thống hơn. Tôi có thể làm điều đó khá dễ dàng nếu tôi không muốn các mẫu có thể tùy chỉnh như được hiển thị trong số plunker

Ở đây tôi có một thành phần my-grid được chuyển dữ liệu được hiển thị. Sau đó, tôi vòng qua các dữ liệu và đưa ra các thành phần card-view hoặc list-view tùy thuộc vào giao diện bạn muốn mà được điều khiển bởi view toggle (mã trong app/my-grid.ts tập tin)

Tôi muốn cung cấp khả năng để vượt qua trong các mẫu tùy chỉnh và tôi đang nghĩ đến một cái gì đó như thế này:

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

Làm thế nào tôi có thể nhận được những gì tôi muốn từ nơi tôi đang ở?

Answer 1

tôi đã có thể giải quyết vấn đề của tôi như 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) 
     } 
    } 

Hy vọng nó giúp bất cứ ai khác mà đang đối mặt với vấn đề tương tự. Hoặc có thể ai đó có thể chỉ cho tôi một giải pháp tốt hơn

Cập nhật: Đối với các phiên bản mới hơn của ng2 (RC tại thời điểm viết bài này), bạn sẽ cần phải sử dụng forwardRef() trong một số trường hợp như vậy:

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