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
s はどこにも見られず、はい、データ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>