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

我注意到,在触发的对话框关闭后,该按钮会获得以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');
}