많은 템플릿이있는 구성 요소

Question

두 개의 템플릿으로 구성 요소를 만들어야합니다. 하나는 몸체에 제목과 기타를 표시하는 것입니다.

내 기본보기에서이 구성 요소를 사용하십시오.

<extended-component> 
    <ng-template> 
     Title 
    </ng-template> 
    <ng-template> 
     Body 
    </ng-template> 
</extended-component> 

구성 요소

import { Component, Input, ContentChild, TemplateRef } from '@angular/core'; 
import { PagedResults } from './pagedresults'; 
import { ColumnDefinition } from './columndefinition'; 

@Component({ 
    selector: 'extended-component', 
    queries: { 
     headerTemplate: new ContentChild(TemplateRef), 
     bodyTemplate: new ContentChild(TemplateRef) 
    }, 
    templateUrl: './extended-component.html' 
}) 
export class ExtendedComponent { 
} 

이 구성 요소

<table> 
    <thead> 
     <tr> 
      <td> 
       <ng-template *ngTemplateOutlet="headerTemplate"> 
       </ng-template> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <ng-template *ngTemplateOutlet="bodyTemplate"> 
      </ng-template> 
     </tr> 
    </tbody> 
</table> 

빌드 및 실행 작업의 템플릿,하지만 난 결과를 예상하지 않은 '제목'디스플레이 때문에 두 번.

기본보기의 두 번째 템플릿을 제거하면 어떻게됩니까? 제목이 하나뿐입니다.

내 기본보기와 구성 요소간에 두 번째 템플릿을 연결하는 방법은 무엇입니까? 나는 두 번째 템플릿을 선택하는 방법을 몰라, 내 문제는 여기에 생각 :

 bodyTemplate: new ContentChild(TemplateRef) 

Answer 1

, 당신은 NG-컨테이너를 사용할 수있는이보십시오.

<extended-component> 
    <ng-container class="title"> 
     Title 
    </ng-container> 
    <ng-container class="body"> 
     Body 
    </ng-container> 
    </extended-component> 

<table> 
    <thead> 
     <tr> 
      <td> 
       <ng-content select=".title"></ng-content> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <ng-content select=".body"></ng-content> 
     </tr> 
    </tbody> 
</table>