Angular `ng-content` 未按预期使用 primeNg 表

Question

我想创建一个可重用的表格组件，它使用 primeNg 来呈现 ui。我创建了一个 table.component.html和 .ts为了那个原因。现在我想呈现表格的内容，这将是表格标题(th)和表格主体(body)。

为此，我正在写 th和 tbody实现作为表的内容并尝试在 table.component.html 中呈现它使用 <ng-content></ng-content> .但是表格没有显示。

我尝试添加 th和 tbody直接在table.component.html并显示表格。不应该ng-content因为内容具有相同的 html 而执行相同的操作？

这是带有示例的代码片段的链接。检查table.component.html在共享目录下。和 app.component.html用于初始启动。评论 ng-content行并取消注释 table.component.html 中的剩余行你应该看到表格。 https://stackblitz.com/edit/angular-playground-kwudxn?file=app%2Fshared%2Ftable%2Ftable.component.html

Answer 1

您的应用程序的问题在于 ng-template 不呈现任何内容，因此 ng-content 也不呈现任何内容。我目前在您的 TableComponent 中没有看到任何附加值，因为它目前只重新发送模板，但这可能是因为它只是一个演示，它会对您的情况产生一些附加值。

您需要更改您的 TableComponent 以从内容中获取 PrimeTemplate 并将它们重新发送到 p-table:

export class TableComponent implements AfterContentInit {

    @Input()
    public data: any[];
    @ContentChildren(PrimeTemplate)
    templates: QueryList<any>;
    headerTemplate: TemplateRef<any>;
    bodyTemplate: TemplateRef<any>;

    constructor() { }

    gePrimeTemplateByType(type: string): PrimeTemplate {
        return this.templates.find(template => {
            return template.getType() === type;
        });
    }

    ngAfterContentInit() {
        this.headerTemplate = this.gePrimeTemplateByType('header').template;
        this.bodyTemplate = this.gePrimeTemplateByType('body').template;
    }
}

在你的模板中:

<p-table [value]="data">
    <ng-template pTemplate="header">
        <ng-container *ngTemplateOutlet="headerTemplate">
        </ng-container>
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <ng-container *ngTemplateOutlet="bodyTemplate; context:{$implicit: data}">
        </ng-container>
    </ng-template>
</p-table>

这里是完整的forked stackblitz demo.

当然还有其他方法可以实现，例如你的 TableComponent 可能只有 2 个 @Input 并且只是将它们重新发送到 p-table 而不是使用 PrimeTemplate .