Angular 5：触发对话框的单击按钮在关闭对话框后突出显示

发布时间：2020-12-17 06:59:49 所属栏目：安全来源：网络整理

导读：我注意到,在触发的对话框关闭后,该按钮会获得以cdk为重点的类和cdk-program-focused.如果我点击任何地方效果消失. app.component.html [片段] mat-cell *matCellDef="let element" span matTooltip="Delete" matTooltipPosition="right" button mat-icon-but

我注意到,在触发的对话框关闭后,该按钮会获得以cdk为重点的类和cdk-program-focused.如果我点击任何地方效果消失.

app.component.html [片段]

<mat-cell *matCellDef="let element">
  <span matTooltip="Delete" matTooltipPosition="right">
    <button mat-icon-button color="warn" (click)="openDeleteAssociationDialog()">
      <mat-icon>delete</mat-icon>
    </button>
  </span>
</mat-cell>

解决方法

>在HTML中添加一些id的按钮.在我的情况下,它是#changeButton：

<button #changeButton mat-icon-button (click)="changeItem(element)" disableRipple>
    <mat-icon>edit</mat-icon>
</button>

>在.ts文件中导入ViewChild和ElementRef：

{ ViewChild,ElementRef } from '@angular/core';

>在.ts文件中声明一个新变量：

@ViewChild('changeButton') private changeButton: ElementRef;

>订阅对话框的afterClose()事件并删除以cdk-program为重点的css类：

dialogRef.afterClosed().subscribe(result => {
    this.changeButton['_elementRef'].nativeElement
        .classList.remove('cdk-program-focused');
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!