Question

我正在尝试创建一个自定义的N级树组件，但我有问题使用ng-template 呈现树叶（没有任何子节点的节点）。具有子项的节点正确呈现，但最后一个节点不会呈现任何内容。

这是我的代码：

型号：

export class Node
{
    Name: string;
    IsExpanded = false;
    IsExpandable = true;
    Children = new Array<any>();
}

TreeNodeComponent

import { Component, Output, EventEmitter, Input, ContentChild, TemplateRef, ElementRef } from '@angular/core';


@Component({
// tslint:disable-next-line:component-selector
selector: 'tree-node',
styleUrls: ['tree-node.component.scss'],
templateUrl: 'tree-node.component.html'
})
export class TreeNodeComponent
{

@Input() Children: Array<any>;

@Input() Key: string;

@ContentChild('LeafTemplate') LeafTemplate: TemplateRef<ElementRef>;

}

树node.component.html

<div class="tree-node"
 *ngFor="let child of Children">
<mat-expansion-panel *ngIf="child.IsExpandable"
                   hideToggle="true"
                   (opened)="child.IsExpanded=true"
                   (closed)="child.IsExpanded=false"
                   [(expanded)]="child.IsExpanded">
<mat-expansion-panel-header [collapsedHeight]="'48px'"
                            [expandedHeight]="'54px'">
  <mat-panel-title>
    <mat-icon *ngIf="!child.IsExpanded">chevron_right</mat-icon>
    <mat-icon *ngIf="child.IsExpanded">expand_more</mat-icon>
    {{child.Name}}
  </mat-panel-title>
</mat-expansion-panel-header>

<ng-template matExpansionPanelContent>
  <tree-node [Children]="child.Children"
             Key="Children">
  </tree-node>
</ng-template>

</mat-expansion-panel>

<ng-template *ngIf="!child.IsExpandable"
           [ngTemplateOutlet]="LeafTemplate"
           [ngTemplateOutletContext]="{item:child}"></ng-template>

</div>

并将其用作：

<tree-node [Children]="Nodes" Key="Children">
    <ng-template #LeafTemplate
                 let-item="item">
        <h4> {{item.Name}}</h4>
    </ng-template>
</tree-node>

任何线索我做错了什么？

这是stackblitz

使用ngTemplateOutlet和ng-template定制角树

0 个答案: