时间戳

首页 > 解决方案 > 单击 V 形时 Angular Material 突出显示，但单击文本时不突出

angular - 单击 V 形时 Angular Material 突出显示，但单击文本时不突出

问题描述

<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”时突出显示。有谁知道出了什么问题？

标签： angularangular-material

解决方案

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

尝试更改这段代码

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

进入

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

推荐阅读