Angular Material Tree无法渲染致页面卡顿问题求助

你的核心问题是使用了不符合Angular Material Tree要求的模板代码，Tree组件并非可以直接通过<mat-tree>嵌套<mat-tree-node>实现，它依赖明确的数据源结构和节点定义逻辑，错误的写法会导致组件内部逻辑异常，进而引发页面卡顿、交互失效和渲染空白。

以下是具体的修正步骤：

1. 补全必要的依赖模块 #

除了MatTreeModule，官方Tree示例默认依赖图标和按钮模块，缺少这些可能引发隐性错误。在app.module.ts中补充导入：

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    // ...其他已导入的模块
    MatTreeModule,
    MatIconModule,
    MatButtonModule
  ]
})
export class AppModule { }

2. 在组件中定义树结构和数据源 #

Tree组件需要明确的节点数据模型和数据源实例，在你的组件类中添加如下代码：

import { Component } from '@angular/core';
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';

// 定义树节点数据结构
interface TreeNode {
  name: string;
  children?: TreeNode[];
}

// 示例树数据
const TREE_DATA: TreeNode[] = [
  {
    name: 'parent node',
    children: [
      { name: '-- child node1' },
      { name: '-- child node2' }
    ]
  }
];

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 转换节点数据为扁平结构
  private _transformer = (node: TreeNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level
    };
  };

  // 树控制器，用于管理节点展开/折叠状态
  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);

  // 树扁平化处理器，将嵌套结构转为扁平结构
  treeFlattener = new MatTreeFlattener(
    this._transformer,
    node => node.level,
    node => node.expandable,
    node => node.children
  );

  // 树数据源，绑定到模板
  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor() {
    // 加载树数据
    this.dataSource.data = TREE_DATA;
  }

  // 判断节点是否有子节点（用于模板渲染判断）
  hasChild = (_: number, node: any) => node.expandable;
}

3. 修改模板代码为正确结构 #

替换你原来的模板代码，使用*matTreeNodeDef定义节点模板，并绑定数据源和控制器：

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- 叶子节点模板 -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <button mat-icon-button disabled></button>
    {{ node.name }}
  </mat-tree-node>

  <!-- 可展开父节点模板 -->
  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
    <button 
      mat-icon-button 
      matTreeNodeToggle
      [attr.aria-label]="'Toggle ' + node.name">
      <mat-icon>{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
    </button>
    {{ node.name }}
  </mat-tree-node>
</mat-tree>

4. 排查版本兼容性 #

确保你的Angular核心版本与Angular Material版本完全匹配（比如Angular 16对应@angular/material 16），版本不匹配会导致大量隐性异常，包括页面卡顿和渲染失败。可以查看package.json中@angular/core和@angular/material的版本号是否一致。

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