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

Question

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

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

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

我想知道如何在 angular 5

上禁用移动设备（或在特定条件下）的 cdk 焦点状态

Answer 1

此错误是由于在浏览器中使用了 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'); });

Answer 2

我最终使用以下 css 来消除效果：

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

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

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

angular 5 disable cdk focus state on mobile

mobile

angular

angular5

angular-cdk