自定义Angular N级树组件叶子节点渲染异常求助

我帮你排查了下代码，叶子节点无法渲染的核心问题是递归渲染时模板没有传递到内层组件，另外还有一处数据初始化的细节需要调整，具体如下：

1. 模板传递失效 #

你的TreeNodeComponent通过@ContentChild('LeafTemplate')获取外层传入的叶子节点模板，但在递归渲染内层<tree-node>时，没有把这个模板传递下去。内层的tree-node组件找不到LeafTemplate，自然无法渲染叶子节点的内容。

修复步骤： #

• 修改TreeNodeComponent，添加@Input()接收模板，同时保留@ContentChild作为外层直接传入的 fallback：

import { Component, Output, EventEmitter, Input, ContentChild, TemplateRef, ElementRef } from '@angular/core'; 
@Component({ 
  selector: 'tree-node', 
  styleUrls: ['tree-node.component.scss'], 
  templateUrl: 'tree-node.component.html' 
}) 
export class TreeNodeComponent { 
  @Input() Children: Array<any>; 
  @Input() Key: string; 
  @Input() LeafTemplate: TemplateRef<ElementRef>; // 新增Input接收模板
  @ContentChild('LeafTemplate') contentLeafTemplate: TemplateRef<ElementRef>; // 保留原ContentChild

  // 优先使用传入的模板，没有则用当前组件内容里的模板
  get currentLeafTemplate(): TemplateRef<ElementRef> {
    return this.LeafTemplate || this.contentLeafTemplate;
  }
}

• 修改模板文件tree-node.component.html，递归时传递模板，同时把ngTemplateOutlet的模板替换为currentLeafTemplate：

<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>
      <!-- 递归时传递LeafTemplate -->
      <tree-node [Children]="child.Children" [LeafTemplate]="currentLeafTemplate">
      </tree-node>
    </ng-template>
  </mat-expansion-panel>
  <!-- 使用currentLeafTemplate -->
  <ng-template *ngIf="!child.IsExpandable" [ngTemplateOutlet]="currentLeafTemplate" [ngTemplateOutletContext]="{item:child}"></ng-template>
</div>

2. 叶子节点的IsExpandable属性设置错误 #

你的Node类默认IsExpandable = true，但叶子节点（没有子节点）需要把这个属性设为false，否则会被渲染成空的mat-expansion-panel，而不是叶子模板。

修复步骤： #

在初始化节点数据时，给没有子节点的节点设置IsExpandable = false，比如：

// 示例数据初始化
const nodes: Node[] = [
  {
    Name: 'Parent Node',
    IsExpanded: false,
    IsExpandable: true,
    Children: [
      {
        Name: 'Leaf Node 1',
        IsExpanded: false,
        IsExpandable: false, // 叶子节点设为false
        Children: []
      },
      {
        Name: 'Child Node with Sub',
        IsExpanded: false,
        IsExpandable: true,
        Children: [
          {
            Name: 'Leaf Node 2',
            IsExpanded: false,
            IsExpandable: false,
            Children: []
          }
        ]
      }
    ]
  }
];

做完这两处修改后，叶子节点就能正常渲染了。

内容的提问来源于stack exchange，提问作者Ali