单击V形时会高亮显示"角度材质"，但单击文本时不会高亮显示

Question

<mat-nested-tree-node (click)="activeNode = node" *matTreeNodeDef="let node; when: hasChild">
<li (contextmenu)="onContextMenu($event, node)">
<div class="mat-tree-node" (click)="filterDevices(node)"  matTreeNodeToggle>
<div (contextmenu)="onContextMenu($event, node)" [ngClass]="{ 'background-highlight': activeNode === node }">
<button mat-icon-button (click)="activeNode = node"
[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}}
</div>
</div>
<ul [class.tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>

树图像

从树中可以看出，该节点以黄色高亮显示，但它仅在单击V形时高亮显示，而不是在单击文本"Assembly"时高亮显示。有人知道怎么了吗？

Answer 1

只是猜测，但在mat-tree节点上有两个点击事件。

尝试更改这段代码

<mat-tree-node (click)="activeNode = node" *matTreeNodeDef="let node" (click)="filterDevices(node)"...

进入

<mat-tree-node (click)="activeNode = node; filterDevices(node)" *matTreeNodeDef="let node"...

Answer 2

因此，修复方法是将(click)="activeNode = node; filterDevices(node)"放在顶部div中，而不是将其放在图标按钮中，因为文本不包含在图标按钮内。代码如下：

<mat-nested-tree-node (click)="activeNode = node" *matTreeNodeDef="let node; when: hasChild">
<li (contextmenu)="onContextMenu($event, node)">
<div class="mat-tree-node" (click)="activeNode = node; filterDevices(node)"  matTreeNodeToggle>
<div (contextmenu)="onContextMenu($event, node)" [ngClass]="{ 'background-highlight': activeNode === node }">
<button mat-icon-button 
[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}}
</div>
</div>
<ul [class.tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>