(Angular 2+) * ngFor에서 ng-content를 사용하면 루프 변수에 액세스 할 수 없습니다.

Question

/프로젝트를 루프 내에있는 슬롯으로 변환하고 투영 된 내용으로 루프 변수에 액세스 할 수 있습니까?

내가 다음

<tr *ngFor="let data of items"> 
    <td>{{data.title}}</td> 
    <ng-content select="[slot]"></ng-content> 
</tr> 

와 기본 구성 요소 그리고 트랜스 클루 전 슬롯을 사용하는 하위 구성 요소가 말해 "슬롯"내가 생성하고자하는 HTML이

입니다

<parent [items]="items"> 
    <ng-container slot> 
     <td>{{data.category}}</td> 
     <td>{{data.number}}</td> 
    </ng-container> 
</parent> 

<tr> 
    <td>{{data.title}}</td> 
    <td>{{data.category}}</td> 
    <td>{{data.number}}</td> 
</tr> 

하지만 실제로 발생하는 것은 "데이터"가 하위 구성 요소에 정의되어 있지 않기 때문에 감각. 이런 식으로 일할 수있는 방법이 있습니까?

Answer 1

TemplateRef을 사용하면 선언적으로 두 구성 요소간에 작용하는 템플릿 변수를 템플릿 수준에서 선언 할 수 있습니다. 다음 해결책은 "슬롯"인프라와 완전히 일치하지 않지만 추가 조사에 유용 할 수 있습니다.

list.component.ts

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

@Component({ 
    selector: 'list', 
    template: ` 
    <tr class="box" *ngFor="let data of items"> 
     <td>{{data.title}}</td> 
     <ng-template 
     [ngTemplateOutlet]="template" 
     [ngTemplateOutletContext]="{ $implicit: data }"> 
     </ng-template> 
    </tr>` 
}) 
export class ListComponent { 
    @Input() items; 
    @ContentChild(TemplateRef) template: TemplateRef; 
    constructor() { } 
} 

wrapper.component.ts는

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

@Component({ 
    selector: 'wrapper', 
    template: ` 
    <table> 
     <list [items]="items"> 
     <ng-template let-data> 
      <td>{{data.category}}</td> 
      <td>{{data.number}}</td> 
     </ng-template> 
     </list> 
    </table>` 
}) 
export class WrapperComponent { 
    items = [ 
    { title: 'T1', category: 'C1', number: 'N1' }, 
    { title: 'T2', category: 'C2', number: 'N2' }, 
    { title: 'T3', category: 'C3', number: 'N3' } 
    ]; 
    @ContentChild(TemplateRef) template: TemplateRef; 
    constructor() { } 
} 

는 또한 어디 당신이 * 아이를 호출된다 Plunker demo ...