angular - 如何为 Angular Material 的树组件应用样式

Question

我正在为我的项目使用 Angular Material 的树组件。这里是 stackblitz链接，这里我需要实现两件事:

1)子元素的文本颜色必须在鼠标悬停时改变。

2) 单击/选择子元素时，必须更改背景颜色，背景颜色保持不变，直到我选择下一个子元素，例如带有 selection 的列表。

像这样

Answer 1

我创建了 Stackblitz演示

此代码按照您的要求工作

我已经添加了一些

tree-loadmore-example.html

<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding
  (click)="activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
        <button mat-icon-button></button> <span class="txtColor">{{node.item}}</span>
</mat-tree-node> 

并在 .ts 中添加

activeNode:any;