如何为角形材料的树成分应用样式

Question

我正在为项目使用角形材料的树组件。这里是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;