在移动设备上全局禁用 Mat-Tooltip

Question

我正在使用 Angular Material 开发 Angular 应用程序，并且遇到了 mat-tooltip 组件的问题。具体来说，我需要在移动设备上全局禁用触摸事件的工具提示，同时使桌面上的悬停事件保持活动状态。

我已尝试使用 Angular Material 文档中建议的以下方法全局配置此行为：

app.module.ts

{
  provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
  useValue: { touchGestures: 'off' },
}

但是，这种方法似乎不适用于我的应用程序。

---

我尝试过的另一种方法：

结合 npm 包

ngx-device-detector

，我在

app-component.ts

中创建了一个方法，在初始化应用程序时调用该方法。因此，如果用户根据我的服务使用移动设备，则会将

.scss

类添加到我的根元素中，该类应将

display: none;

属性全局分配给所有 mat-tooltips。

app.component.ts

isMobileOrTablet: boolean = false;

constructor(private deviceService: DeviceDetectorService) {
this.checkDevice()
}

checkDevice() {
    if (this.deviceService.isMobile() || this.deviceService.isTablet()) {
      this.isMobileOrTablet = true;
    }
}

get appClasses(): string {
    return this.isMobileOrTablet ? 'disable-tooltips' : '';
  }

styles.scss

.disable-tooltips {
  .mat-tooltip {
    display: none !important;
  }
}

之后我将其添加到我的根元素中：

app.component.html

<!-- This is my root-element -->
<app-menue class="{{ appClasses }}"></app-menue>

当我在移动设备上时，该类会正确分配给我的元素，因此这是有效的。然而，这也没有效果，工具提示仍然显示在移动设备上......

是否有一种可靠的方法来全局配置 mat-tooltip 以在整个应用程序中禁用触摸手势，而无需手动向每个元素添加

matTooltipDisabled

属性？

任何演示如何实现这一目标的指导或示例将不胜感激。

Answer 1

看来这段代码毕竟有效了。

{
  provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
  useValue: { touchGestures: 'off' },
}

问题是我的平板电脑总是要求桌面版本。所以我显然没有触发任何触摸事件。

删除此复选框后，它按预期工作。