Angular 14 - Slider 仍然不能与电容器一起使用

Question

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

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

ng serve --open

我明白了：

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

ng build
npx cap sync
npx cap run android

在模拟器中查看 Android Studio 中的 slider。 您可以单击并导致 slider 移动，但不能“滑动”slider，这就是重点。 它“起作用”是这样的：

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

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

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

• 创建 angular 项目
• 添加电容器和材料
• 在某处放一个 slider
• 将其发送到模拟器或手机

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

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

我的 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 { }

Answer 1

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