Angular 5 : clicked button that triggers a dialog becomes highlighted after the dialog is closed

Question

我注意到按钮获取类 cdk-focused 和 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。