Блог

Я хочу обернуть список элементов, но мне нужна гибкость предоставления уникального шаблона.

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

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

Взгляните на эту статью. Он делает что-то очень похожее на то, что вам нужно. Вашей основной задачей будет привязка значений. Вы также можете посмотреть статью Бена Наделя. Это относится к RC1, и даже он в комментариях упоминает, что setLocal больше не существует и что вам нужно передать контекст.