맞춤 요소를 허용하고 반복하는 구성 요소 만들기

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}]; 
} 

• 위의 코드는 this plunker의 편집이다.
• 제안 사항은 here이지만 매우 모호했습니다.

Answer 1

내가 ng-content 트랜스 클루 전 (NG2의 초기 버전은하지 않습니다)에 지시어를 사용할 수 here을 발견, 그래서 다음과 같이 해결책은 간단하다 :

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}]; 
}