PrimeNG 中的 pTemplate 是什么？

Question

我正在浏览 PrimeNG 4.3.0 的文档p-tree here，并遇到了他们使用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

pTemplate 是 PrimeNG 的定制指令。其目的是将您（用户）定义的模板链接到库（PrimeNG）定义的容器。

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

上述也可以使用ngTemplateOutlet指令来实现。

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

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

Answer 2

该指令的唯一目的是保持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>