如何在角度中删除自动对焦？

Question

我正在angular 6使用angular material design。我使用slidebar图标简单地应用toggle menu。我正面临一个问题。每当我选择slidebar menu中的任何项目时，我都有3项目选择任何项目。它会关闭我的滑动条导航，但我的menu button是自动对焦。< / p>

这是我的代码

https://stackblitz.com/edit/angular-353qur?file=src%2Fapp%2Fcontactmanager%2Fcomponents%2Ftoolbar%2Ftoolbar.component.html

重现此错误的步骤

1. 选择菜单按钮或图标。它显示侧边栏有三个选项。
2. 选择关闭侧边栏的任何选项，menu图标为自动对焦.Why ??

我想从侧边栏中选择项目后删除自动对焦

更新

请查看mobile。点击F12和选择手机。 请检查小型设备

const SMALL_WIDTH_BREAKPOINT = 560;

重点

只有在输出小于500像素的窗口

时，才会重现此错误

Answer 1

你必须删除css悬停效果。在mat按钮上添加一个类（＆＃39; no-hover＆＃39;）

<button mat-button (click)="toggleSidenav.emit()" class="sidenav-toggle no-hover">
    <mat-icon>menu</mat-icon>
</button>

和模板css内部

.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
  background: none;
}

Answer 2

在styles.css中添加以下样式

// remove blue border focus
button:focus {
    outline: none !important;
}