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>

构建和执行工作，但我没有预期的结果，因为'Title'显示两次。

如果我删除了主视图的第二个模板。我只有一个'标题'

如何在主视图和组件之间链接第二个模板？我认为我的问题在这里，我不知道如何选择第二个模板：

        bodyTemplate: new ContentChild(TemplateRef)

Answer 1

试试这个，你可以使用ng-container。

   <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>

包含许多模板的组件

1 个答案: