Создание компонента, который принимает и перебирает пользовательский элемент

Question

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

Вот то, что я смог придумать, и это прекрасно работает. Но я не удовлетворен. Я хочу что-то, что не требует упаковки пользовательского элемента в <template> тег.

import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'sub',
  template: `
    <ng-content></ng-content>
  `
})
export class SubComponent  {}

@Component({
  selector: 'my-app',
  template: `
    <sub>
      <template ngFor #listItem [ngForOf]="list" #i="index"> //<--don't want this tag
        <div>{{listItem | json}}</div>
        <p>{{i}}</p>
      </template>
    </sub>
  `,
  directives: [ SubComponent ]
})

export class AppComponent {
  list = [{name: 'John', age: 26},{name: 'Kevin', age: 26},          {name:'Simmons', age:26}];
}

• приведенный выше код является правкой этого плункера.
• видел предложение здесь, но были довольно расплывчаты.

Answer 1

Обнаружил здесь, что я мог бы использовать директиву на ng-content transclusion (ранние версии ng2 этого не делают), поэтому решение так же просто:

import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
    selector: 'sub',
    template: `
        <p>content</p>

        <ng-content></ng-content>

        <p>more content</p>

    `
})
export class SubComponent  {}

@Component({
    selector: 'my-app',
    template: `
        <sub >
            <any-element *ngFor="let listItem of list" >
                {{ listItem | json }}
            </any-element>
        </sub>
    `
})

export class AppComponent {
    list = [{name: 'John', age: 26},{name: 'Kevin', age: 26}, {name:'Simmons',     age:26}];
}