2016-10-13 14 views
3

アイテムのリストを折り返したいと思いますが、私はユニークなテンプレートを提供する柔軟性が必要です。角2のジェネリックリストイテレータを作成する

<list [items]="someItems"> 
    <book-list-item><!-- Books, cars, dogs, whatever --> 
    </book-list-item><!-- This will contain a unique template --> 
</list> 

ListItemComponent

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'list-item', 
    template: ` 
     <div *ngFor="let item of items"> 
      <ng-content></ng-content><!-- Whatever book-list-item contains --> 
     </div>` 
}) 
export class ListItemComponent { 
    @Input() items: Array<any>; 
} 

BookListItemComponent

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'book-list-item', 
    template: ` 
     <div class="row"> 
      <div class="col-xs-6">Books</div> 
      <div class="col-xs-6">Rule</div> 
     </div>` 

}) 
export class BookListItemComponent {} 

もちろん、私はアイテムとして本を渡しているはずだが、これはあくまでも一例です。私はこの作業に似た何かを得ることができますが、 "Books Rule"は最後のlist-group-item(Bootstrapのため)にのみ印刷されます。

一般的なコンポーネントを親コンポーネントに渡し、アイテムのリスト内のアイテムとして汎用コンポーネントを反復する方法を実際に探しています。誰かが私を正しい方向に向けることができますか?

答えて

0

this articleをご覧ください。それはあなたが必要とするものに非常に似た何かをします。あなたの主な挑戦は値を束縛します。また、Ben Nadel's articleを見ることができます。それはRC1に関連し、コメント内の彼はsetLocalがもう存在しないこと、そしてコンテキストを渡す必要があることを述べています。

関連する問題