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。

Answer 2

ng-content基本上用于content projection.，请尝试使用<ng-template>代替<ng-content>

链接：-https://angular-2-training-book.rangle.io/handout/components/projection.html

app / child / child.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'child',
  template: `
    <div style="border: 1px solid blue; padding: 1rem;">
      <h4>Child Component</h4>
      <ng-content></ng-content>
    </div>
  `
})
export class ChildComponent {
}

app / app.component.html

 <child>
    <p>My <i>projected</i> content.</p>
  </child>

Angular`ng-content`不能按预期工作

2 个答案:

app / child / child.component.ts

app / app.component.html