Angular 14 - 滑块仍然不能与电容器一起使用答案

【问题标题】：Angular 14 - Slider Still Doesn't Work With CapacitorAngular 14 - 滑块仍然不能与电容器一起使用
【发布时间】：2022-08-18 20:57:04
【问题描述】：

我知道这个问题自 2018 年以来一直在发生，并且有很多帖子和不同的解决方案，但没有一个对我有用。

我创建了一个新的 Angular 14 项目，删除了启动模板，添加了电容器和材料。我从第一个 Material example 添加了一个滑块。如果我通过以下方式运行项目：

ng serve --open

我明白了：

它在浏览器中按预期工作。然后我做：

ng build
npx cap sync
npx cap run android

在模拟器中查看 Android Studio 中的滑块。您可以单击并使滑块移动，但不能“滑动”滑块，即点。它“工作”是这样的：

在故障排除过程中，我查看了许多解决方案。我认为最重要的是：

This SO discussion from 2020。这个讨论归结为“安装hammerjs”。有很多地方可以做到这一点，main.ts、polyfill.ts、我的组件等。虽然有些似乎在这方面取得了成功，但我没有。这篇文章还提到加载模块的顺序很重要。我在我的示例应用程序中尊重了这个顺序。
This GitHub discussion/bug report。最终的结果本质上也是“秩序问题”，显然无法确定。此外，此错误报告来自 2017 年，因此某些修复不再有效。例如，“MaterialModule”不再是一个东西。也有很多关于锤子的讨论。有几个人通过在不同的地方放锤子取得了成功（插入你自己的笑话），但到目前为止没有任何效果。还有关于 GestureConfig 的讨论，它似乎不再存在于 @angular/material 中？简而言之：没有成功。

我提前道歉，我现在不能“发布最低回购”，但这很容易创建：

创建一个角度项目
添加电容器和材料
在某处放置一个滑块
发送到模拟器或手机

似乎很多人仍然有这个问题。在 2022 年，这个问题已经 4 年了，是否有“正确的方法”来使用滑块使其真正完成工作，或者在这种情况下最好放弃材料？

我绝不是 Angular 的专家，所以很可能这是我的错误。如果可能的话，我更喜欢使用 Material，但滑块看起来很善变。

我的html：

<mat-slider aria-label=\"unit(s)\"></mat-slider>

我的 SCSS：

mat-slider {
width: 300px;}

app.module.ts（我的组件是 MatchAnalysisComponent）

import { NgModule } from \'@angular/core\';
import { BrowserModule } from \'@angular/platform-browser\';

import { AppRoutingModule } from \'./app-routing.module\';
import { AppComponent } from \'./app.component\';
import { MatchAnalysisComponent } from \'./match-analysis/match-analysis.component\';
import { BrowserAnimationsModule } from \'@angular/platform-browser/animations\';
import { MatSliderModule } from \'@angular/material/slider\';

@NgModule({
  declarations: [
    AppComponent,
    MatchAnalysisComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： angular-material2 capacitor angular14

【解决方案1】：

对我来说最好的解决方案是放弃 mat-slider 并使用带有类型范围的 html 输入。权衡是 html 范围输入不能轻易设置样式。至少它可以按预期工作，并且可以很好地与 Angular 配合使用，而不是在移动设备上无法使用的材质滑块。

【讨论】：