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 則無法在移動設備上使用。