如何为Angular 2 Material Tree节点添加点击选中背景色切换功能

我来帮你搞定这个问题！Angular Material Tree确实没在官方文档里直接给出选中状态的实现方案，但咱们可以通过维护选中节点集合+绑定点击事件+自定义样式来轻松实现你要的点击节点切换背景色的效果。

步骤1：在组件类中维护选中状态 #

首先在你的组件.ts文件里，定义一个Set来存储选中的节点（用Set是因为它能自动处理重复选中的情况），再写一个切换选中状态的方法：

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

// 请根据你的实际节点结构调整这个接口
interface FileNode {
  filename: string;
  children?: FileNode[];
}

@Component({
  selector: 'app-your-tree-component',
  templateUrl: './your-tree-component.component.html',
  styleUrls: ['./your-tree-component.component.css']
})
export class YourTreeComponent {
  // 用来存储选中的节点，自动去重
  selectedNodes = new Set<FileNode>();

  // 以下保留你原有的树控制和数据源逻辑
  private _transformer = (node: FileNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      filename: node.filename,
      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);

  // 切换节点选中状态的核心方法
  toggleNodeSelection(node: FileNode) {
    this.selectedNodes.has(node) 
      ? this.selectedNodes.delete(node) 
      : this.selectedNodes.add(node);
  }

  // 保留你原有的hasChild方法
  hasChild = (_: number, node: any) => node.expandable;
}

步骤2：修改模板，绑定点击事件和选中样式 #

更新你的HTML模板，给每个<mat-tree-node>添加点击事件和动态样式类，同时要处理父节点折叠按钮的事件冒泡问题：

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- 叶子节点模板 -->
  <mat-tree-node 
    *matTreeNodeDef="let node" 
    matTreeNodeToggle 
    matTreeNodePadding
    (click)="toggleNodeSelection(node)"
    [class.selected]="selectedNodes.has(node)"
  >
    <button mat-icon-button disabled></button>
    {{node.filename}}
  </mat-tree-node>

  <!-- 父节点模板 -->
  <mat-tree-node 
    *matTreeNodeDef="let node;when: hasChild" 
    matTreeNodePadding
    (click)="toggleNodeSelection(node)"
    [class.selected]="selectedNodes.has(node)"
  >
    <button 
      mat-icon-button 
      matTreeNodeToggle 
      [attr.aria-label]="'toggle ' + node.filename"
      <!-- 阻止按钮点击事件冒泡，避免同时触发选中和折叠 -->
      (click)="$event.stopPropagation()"
    >
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.filename}}
  </mat-tree-node>
</mat-tree>

步骤3：添加自定义选中样式 #

在组件的CSS文件里，给.selected类设置背景色，匹配你预期的深色背景效果：

/* 选中节点的背景样式 */
.mat-tree-node.selected {
  background-color: #3f51b5; /* 可根据需求替换成你想要的颜色 */
  color: white; /* 调整文字颜色，确保可读性 */
}

/* 可选：添加节点hover效果提升交互感 */
.mat-tree-node:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

这样点击任意节点时，就会自动切换它的选中状态，背景色也会跟着变化啦！

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