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

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

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

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

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

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

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

1. 订阅对话框的 afterClose（）事件，然后删除 cdk-program-focused css类：

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

Answer 2

此样式适合我：

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

Answer 3

在我的情况下，真正的问题仍然存在于按钮结构中，“材料”构建了各个子组件，最后一个是具有CSS类“ mat-button-focus-overlay”的“ div”：

我的解决方案只是在'style.css'文件中添加或选择'mat-button-focus-overlay'

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

Answer 4

您可以简单地在使用mat-dialog的文件中跳过CSS

Count(sum), OPEN(mean) and HIGH(mean)

根据您的情况，将此CSS添加到.then(function(result) { console.log(result); return result.user.updateProfile({ displayName: User.displayName }) this.setState({ displayName: "", email: "", password: "", confirmPassword: "" }); }) 组件的CSS文件中。

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，我发现有些按钮仍然保留了某种形式的焦点。我没有删除类，而是在元素上调用了 blur ，这解决了我的问题。

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

Answer 7

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

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

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

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