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