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

Question

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

Answer 1

这里更好的解决方案是使用配置属性restoreFocus: false

matDialog.open(<your-component>, {
    restoreFocus: false
});

在这种情况下，当您使用 matDialogRef.close() 关闭 matDialog 时，焦点将不会应用于该删除按钮/图标。

请参阅： https: //github.com/angular/components/issues/8420 - 它还有其他替代解决方案，包括restoreFocus: false.

Answer 2

1. 在 HTML 中添加一些 id 到您的按钮。就我而言，它是#changeButton：

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

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

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

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

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

4. 订阅对话框的afterClose()事件并删除以cdk 程序为中心的css 类：

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