Angular 5如何在移动设备上禁用CDK焦点状态？

Question

在移动设备上存在一个错误（我猜），当您单击侧边导航菜单，然后选择要前往的路由时，它会关闭侧边栏，但会保留菜单按钮处于焦点状态。对于打开模态框的按钮或实际上具有焦点状态的任何内容（侧边栏、导航项、按钮等等），也会发生这种情况。

您可以在angular material侧边栏示例中查看它发生的情况（模拟移动设备）： https://stackblitz.com/angular/brrokxxmqvrn?file=app%2Fsidenav-autosize-example.ts 或者您可以查看下面的截图（在我单击切换侧边栏按钮后，它处于焦点状态） 我想知道如何在移动设备上禁用cdk焦点状态（或在某些条件下）在angular 5上。

- Ron

---

你尝试过使用 autoFocus: false 吗？https://material.angular.io/components/sidenav/api - Robin

无法绑定到 'autoFocus'，因为它不是 'mat-sidenav' 的已知属性。 - Ron

你试过这样写吗？<mat-sidenav [autoFocus]="false"> - Robin

是的，那正是我尝试的方法。 - Ron

Answer 1

我最终采用以下CSS来消除这种效果：

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

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

- Ron

Answer 2

这个 bug 是由于在浏览器中使用 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'); });

- Gary Mendonca