4

好吧，这是我试图将模板传递nodeTemplate给子组件的父组件ils-tree

<div class="nodes-panel">
    <ils-tree layout="horizontal" [json]="nodes" [template]="nodeTemplate">
    </ils-tree>
</div>

<ng-template #nodeTemplate>
    <ng-template let-node  pTemplate="default">
        <p class="node-type">{{node.data.nodeType}}</p>
        <p class="node-name">{{node.data.name}}</p>
    </ng-template>
    <ng-template let-node  pTemplate="orgNode">
        <p class="org-node-name">{{node.data.name}}</p>
    </ng-template>
</ng-template>

子组件ils-tree的 HTML 看起来是这样的

<p-tree
  [value]="nodes"
  [layout]="layout"
  selectionMode="single"
  [(selection)]="selectedNode"
  [loading]="loading"
>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</p-tree>

并且控制器文件有

@Input()
template: TemplateRef<any>;

基本上，ps 无处可见，是的，数据json正在成功传递。帮助！

PS直接嵌入时的模板，在两者之间，有效。那是，

<p-tree
  [value]="nodes"
  [layout]="layout"
  selectionMode="single"
  [(selection)]="selectedNode"
  [loading]="loading"
>
  <ng-template let-node  pTemplate="default">
        <p class="node-type">{{node.data.nodeType}}</p>
        <p class="node-name">{{node.data.name}}</p>
    </ng-template>
    <ng-template let-node  pTemplate="orgNode">
        <p class="org-node-name">{{node.data.name}}</p>
    </ng-template>
</p-tree>
4

1 回答 1

1

我认为primeng树不允许您在另一个模板中使用pTemplate正确的模板。

我可以制定一个解决方法，声明模板分离并传递类型。主页看起来像：

<ils-tree [templates]="[{type:'orgNode',template:templateOrg},
{type:'default',template:templateDefault}]"
 [data]="data"></ils-tree>

<ng-template let-node="node" pTemplate="default" #templateDefault>
    <p class="node-type">{{node.label}}</p>
</ng-template>

<ng-template let-node="node" pTemplate="orgNode" #templateOrg>
    <p class="org-node-name">{{node.label}}</p>
</ng-template>

然后ils-tree.html看起来像：

<p-tree [value]="data">
    <ng-container *ngFor="let temp of templates">
    <ng-template [pTemplate]="temp.type" let-node>
        <ng-template [ngTemplateOutlet]="temp.template" [ngTemplateOutletContext]="{
                 node:node
               }">
            </ng-template>
        </ng-template>
    </ng-container>
</p-tree>

这里的技巧是将您用作上下文的节点与ngTemplateOutletContext一起传递给您的模板，以便您可以通过let-node="node"在主体中使用它。

ils-tree.ts看起来像：

  @Input() templates: any[];
  @Input() data: any;

在我的示例中，我为模板添加了一个模型，以使其更易于阅读。

您在这里有现场示例：
https ://stackblitz.com/edit/angular-tree-templates

于 2019-04-02T11:35:12.223 回答