首页 文章

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

提问于
浏览 次
5

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

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

或者您可以看到下面的屏幕截图（切换侧边按钮在我点击之后聚焦）
enter image description here

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

mobile angular5 angular-cdk

2 回答

  • 1

    我最终做的删除效果是使用以下css：

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

    .mat-button-focus-overlay {
      display: none !important;
    }
  }
}
    回复于
  • 0

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

相关问题