2016-10-13 4 views
3

Я хочу обернуть список элементов, но я хочу гибкость при поставке уникального шаблона.Создание универсального итератора списков в Angular 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 {} 

Очевидно, что я бы прохождение книги как пунктов, но это всего лишь пример. Я могу получить что-то похожее на эту работу, но «Правило книг» печатается только в последнем элементе списка-списка (потому что Bootstrap).

Я действительно хочу понять, как передать общий компонент родительскому компоненту, который будет перебирать общий компонент как элемент в списке элементов. Может ли кто-нибудь указать мне в правильном направлении?

ответ

0

Посмотрите на this article. Он делает что-то очень похожее на то, что вам нужно. Ваш главный вызов будет связывать ценности. Вы также можете посмотреть на Ben Nadel's article. Это относится к RC1, и даже в комментариях упоминается, что setLocal больше не существует и вам нужно передать контекст.

Смежные вопросы