如何在Angular Mat Tree中仅修改顶级父节点的文件夹颜色

当前所有父节点（包括嵌套层级）都被应用了相同的颜色样式，需要区分顶级与嵌套父节点，实现顶级父节点文件夹显示蓝色，嵌套父节点保持黄色的效果，可按以下步骤修改：

1. 在组件中添加顶级节点判断方法 #

在组件类里实现一个方法，用于识别当前节点是否为顶级节点：

isTopLevelNode(node: any): boolean {
  // 通过TreeControl判断节点是否无父节点，无父节点即为顶级节点
  return this.nestedTreeControl.getParent(node) === null;
}

如果你的数据源本身带有层级标记（如node.level字段），也可以直接用return node.level === 0判断，效率更高。

2. 修改模板中的样式条件 #

分别修改普通树节点和嵌套树节点里的文件夹图标容器，通过条件判断给不同层级的父节点绑定不同样式类：

普通树节点部分：

<span *ngIf="node.location === null; else file" 
      [class.folder-color]="!isTopLevelNode(node)" 
      [class.top-level-folder]="isTopLevelNode(node)">
    <img src="./../../../../../assets/icons/MaterialIconFolder.svg">
</span>

嵌套树节点部分：

<span *ngIf="node.location === null; else file" 
      [class.folder-color]="!isTopLevelNode(node)" 
      [class.top-level-folder]="isTopLevelNode(node)">
    <img src="./../../../../../assets/icons/MaterialIconFolder.svg">
</span>

3. 添加对应CSS样式 #

在组件的样式文件中定义两个类的颜色规则（根据你的图标类型调整，以下是针对SVG图标的示例）：

/* 嵌套父节点保持黄色 */
.folder-color img {
  filter: invert(70%) sepia(50%) saturate(500%) hue-rotate(30deg);
}

/* 顶级父节点设置蓝色 */
.top-level-folder img {
  filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(180deg);
}

如果使用的是Angular Material自带的<mat-icon>，可以直接设置color属性替代filter。

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