Angular 6 - дочерний элемент не отображает шаблон, переданный родителем - PullRequest
Новая
       30

Angular 6 - дочерний элемент не отображает шаблон, переданный родителем

4 голосов
/ 29 марта 2019

Ну, это мой родительский компонент, где я пытаюсь передать шаблон 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>

HTML-код дочернего компонента ils-tree выглядит следующим образом 

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

Спасибо.

1 Ответ

1 голос
/ 02 апреля 2019

Я думаю, что дерево основных элементов не позволяет использовать шаблон внутри других шаблонов с правильным значением 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

...