Child 不呈现由 parent 传递的模板

Question

嗯，这是我的 parent 组件，我试图将模板 nodeTemplate 传递给 child 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>

child 组件 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.S 直接嵌入的模板在两者之间有效。也就是说，

<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".

ils-tree.ts 看起来像：

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

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

这里有实例:
https://stackblitz.com/edit/angular-tree-templates

Child 不呈现由 parent 传递的模板

Child doesn't render template passed by parent

ng-template

primeng

angular

ng-container