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

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

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-program 为中心的css 类：

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

Answer 2

就我而言，真正的问题在于按钮结构，“材料”构建各种子组件，最后一个是带有 css 类“mat-button-focus-overlay”的“div”：

我的解决方案很简单，在“style.css”文件中，添加或命名“mat-button-focus-overlay”

.mat-button-focus-overlay { background-color: transparent!important; }

Answer 3

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

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

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

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

Answer 4

这种风格为我固定：

.mat-button, .mat-flat-button, .mat-stroked-button
{   
    &.cdk-program-focused .mat-button-focus-overlay
    {
        opacity: 0 !important;
    }
}

Answer 5

像这样使用它

        .mat-icon-button,
        a.mat-button {
            &.cdk-focused,
            &.cdk-program-focused {
                background-color: transparent;
    
                .mat-button-focus-overlay {
                    display: none;
                }
            }
        }

Answer 6

基于@yzhou，我发现一些按钮仍然保留了某种形式的焦点。我没有删除类，而是在元素上调用模糊，这解决了我的问题。

dialogRef.afterClosed().subscribe(result => {
    this.changeButton['_elementRef'].nativeElement.blur(); 
}

Answer 7

您可以简单地覆盖 mat-dialog 消费文件中的 css

.mat-button-focus-overlay { 
  background-color: transparent!important;
 }

在您的情况下，将此 css 添加到mat-cell组件的 css 文件中。