使用primeNg表,Angular`ng-content`无法正常工作

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

您需要更改TableComponent以从内容中获取PrimeTemplates并将它们重新发送到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个@Inputs,只需将它们重新发送到p-table而不是使用PrimeTemplates.