具有多個模板的組件

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>