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

Question

移动设备上有一个错误（我猜），当您单击侧导航菜单然后选择要前往的路线时，它会关闭侧导航但使菜单按钮处于焦点状态。也会发生在打开模式的按钮上，或者实际上是任何具有焦点状态的按钮（侧面导航、导航项目、按钮等等..）

您可以在 angular material side nav 示例中看到它（模拟移动设备）： https ://stackblitz.com/angular/brrokxxmqvrn?file=app%2Fsidenav-autosize-example.ts

或者你可以看下面的截图（我点击后切换sidenav按钮是焦点）

我想知道如何在角度 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;
    }
  }
}

Answer 2

这个错误是由于在浏览器中使用了 Angular 的自定义按钮元素。解决方案是使用 Javascript 检测用户点击并手动禁用焦点。

您可以尝试以下方法：

scope.clickActive = false;
element.on('click', function() {
    scope.clickActive = true;
    $timeout(function(){
      scope.clickActive = false;
    }, 100);
  })
  .on('focus', function() {
    if(scope.clickActive === false) { element.addClass('md-focused'); }
  })
  .on('blur', function() { element.removeClass('md-focused'); });