Question

好吧，这是我的父组件，我试图将模板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>;

基本上，p是无处可见，是的，数据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>

谢谢。

Answer 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”一起使用strong>。

ils-tree.ts如下所示：

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

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

您在此处有实时示例：
https://stackblitz.com/edit/angular-tree-templates

Angular 6-子级不渲染父级传递的模板

1 个答案: