PrimeNG 中的 pTemplate 是什么？

Question

我正在浏览 p-tree here 的 PrimeNG 4.3.0 文档，并遇到了这个使用 pTemplate 属性的示例，但我无法了解它的作用或工作原理。

<p-tree [value]="files">
    <ng-template let-node pTemplate="default">
        <input [(ngModel)]="node.label" type="text" style="width:100%">
    </ng-template>
</p-tree>

有人可以解释一下 pTemplate 的目的是什么吗？

Answer 1

该指令的唯一目的是保存 ng-template 引用（并为其分配了一些唯一键）。稍后在父组件中可以获取 pTemplate 指令列表：

@ContentChildren(PrimeTemplate) templates: QueryList<any>;

此列表是一对 string 键和 TemplateRef 值。

此机制允许软件开发人员使用多个 ng-templates 并将它们注入父组件中的 *ngTemplateOutlet 指令。

<p-tree [value]="files">
    <ng-template let-node  pTemplate="picture">
        <img [attrs.src]="picture.path">
    </ng-template>
    <ng-template let-node  pTemplate="default">
        <input [(ngModel)]="node.label" type="text" style="width:100%">
    </ng-template>
</p-tree>

Answer 2

pTemplate 是 PrimeNG 定制的指令。它的目的是link你（用户）定义的模板到库（PrimeNG）定义的容器。

这使用户能够提供显示在库制作的组件内的自定义模板。

以上内容也可以使用ngTemplateOutlet指令实现。

您可以创建一个组件，在其内部的 <ng-container> 上有一个 ngTemplateOutlet。使用该组件时，您可以在其组件选择器标签之间放置 <ng-template> 个子组件，并为它们命名。通过这种方式，您基本上可以将 UI 逻辑与组件逻辑分离并实现更大的灵活性。

这是一个很棒的演示文稿，它帮助我学习了如何使用 ngTemplateOutlet：https://youtu.be/2SnVxPeJdwE

PrimeNG 中的 pTemplate 是什么？

What is a pTemplate in PrimeNG?

primeng

angular