子项不呈现父项传递的模板

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已成功传递。帮助！

附言 模板直接嵌入时，介于两者之间，有效。那是

<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">中使用它。

ils-tree.ts如下所示：

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

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

这里有一个活生生的例子：
https://stackblitz.com/edit/angular-tree-templates