angular 5禁用移动设备上的cdk焦点状态

Question

在移动设备上有一个错误(我猜),当您单击侧面导航菜单然后选择要转到的路线时,它会关闭sidenav,但会使菜单按钮处于焦点状态.也可以使用打开模态的按钮,或实际上具有焦点状态的任何东西(侧面导航,导航项,按钮等等).

您可以看到它发生在角度材料侧导航示例(模拟移动设备):https://stackblitz.com/angular/brrokxxmqvrn？file = app%2Fsidenav-autosize-example.ts

或者您可以看到下面的屏幕截图(切换侧边按钮在我点击之后被聚焦)

我想知道如何在角度5上禁用移动(或在某些条件下)的cdk焦点状态

Answer 1

我最终消除效果的方法是使用以下 css：

.mat-button,
.mat-icon-button {
  &.cdk-focused,
  &.cdk-program-focused {
    background-color: none !important;

    .mat-button-focus-overlay {
      display: none !important;
    }
  }
}