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

Question

我想创建一个可重用的 table 组件，它使用 primeNg 来渲染 ui。我为此创建了 table.component.html 和 .ts。现在我想渲染 table 的内容，这将是 table headers (th) 和 table body (body ).

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

我尝试直接在 table.component.html 中添加 th 和 tbody，它显示 table。不应该 ng-content 做同样的事情因为内容具有相同的 html?

这里是 link 示例片段。检查共享目录下的 table.component.html。并且 app.component.html 用于初始启动。注释 ng-content 行并取消注释 table.component.html 中剩余的行，您应该会看到 table。 https://stackblitz.com/edit/angular-playground-kwudxn?file=app%2Fshared%2Ftable%2Ftable.component.html

Answer 1

ng-content 基本上用于 content projection. 尝试使用 <ng-template> 而不是 <ng-content>

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

Answer 2

您的应用程序的问题是 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。

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

Angular `ng-content` is not working as expected with primeNg tables

primeng

angular

primeng-turbotable

app/child/child.component.ts

app/app.component.html