具有多个模板的组件

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>