如何在Angular Material树中实现节点高亮的TypeScript方法？

结合你已有的代码，以下是实现高亮目标节点的完整步骤：

1. 在组件中添加高亮状态管理 #

首先在组件类里新增变量，用于跟踪当前高亮的节点ID：

// 组件类内部
highlightedNodeId: number | null = null;

2. 编写highlight方法 #

实现高亮逻辑，匹配目标节点并更新状态，同时清除之前的高亮：

highlight(node: ExampleFlatNode): void {
  // 清除之前的高亮状态
  this.highlightedNodeId = null;
  // 设置当前节点为高亮目标
  this.highlightedNodeId = node.id;
  
  // 可选：自动滚动到目标节点，优化用户体验
  setTimeout(() => {
    const element = document.getElementById(node.name);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }, 100);
}

注意：修正你原expand方法里的拼写错误，把hightlight改成this.highlight，确保调用上下文正确。

3. 修改模板，绑定动态样式 #

在两个mat-tree-node元素上，根据highlightedNodeId动态添加高亮类：

<mat-tree #inboxFolders [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- 叶子节点模板 -->
  <mat-tree-node *matTreeNodeDef="let node" 
                 matTreeNodePadding 
                 (contextmenu)="onContextmenu(node)"
                 (click)="onNodeClick(node,$event)" 
                 class="treeNode" 
                 [cdkContextMenuTriggerFor]="inboxFolderContextMenu"
                 id="{{node.name}}"
                 [class.highlighted]="node.id === highlightedNodeId">        
    {{node.name}}
  </mat-tree-node>
  
  <!-- 父节点模板 -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" 
                 matTreeNodePadding 
                 (contextmenu)="onContextmenu(node)"
                 (click)="onNodeClick(node,$event)" 
                 id="{{node.name}}" 
                 class="treeNode"
                 [cdkContextMenuTriggerFor]="inboxFolderContextMenu"
                 [class.highlighted]="node.id === highlightedNodeId">
    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

4. 添加CSS高亮样式 #

在组件的样式文件中定义高亮的视觉效果：

.treeNode.highlighted {
  background-color: #e3f2fd; /* 浅蓝色高亮，可根据需求自定义颜色 */
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

5. 更新expand方法 #

简化原expand方法的逻辑，并确保正确调用高亮方法：

expand(folderId: number): void {
  const targetNode = this.treeControl.dataNodes.find(node => node.id === folderId);
  if (targetNode) {
    this.treeControl.expand(targetNode);
    this.highlight(targetNode); // 调用高亮方法
  }
}

用find替代for循环，代码更简洁高效。

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