Angular 14中Material Slider搭配Capacitor无法滑动问题求助

问题描述 #

自2018年起该问题就存在，网上已有大量相关帖子与解决方案，但均未对我生效。我创建了全新的Angular 14项目，移除初始模板后集成Capacitor与Material组件库，采用Material官方示例的Slider组件：

• 通过ng serve --open运行时，Slider在浏览器中可正常工作；
• 执行ng build、npx cap sync、npx cap run android部署到Android Studio模拟器后，Slider仅支持点击切换位置，无法滑动。

已尝试的无效方案 #

• 按照2020年相关讨论安装hammerjs，尝试在main.ts、polyfill.ts及组件中引入，遵循模块加载顺序，但无效果；
• 尝试GitHub相关Bug报告中的方案，但部分旧方案已失效（如MaterialModule已废弃），引入hammerjs及GestureConfig（当前@angular/material中不存在）也无效果。

问题复现步骤 #

• 创建Angular项目
• 集成Capacitor与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 { }

可行解决方法 #

1. 正确配置HammerJS #

• 安装依赖：

  npm install hammerjs @types/hammerjs --save
  

• 在main.ts最顶部引入（确保在Angular初始化前加载）：

  import 'hammerjs';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

2. 添加自定义Hammer手势配置 #

修改app.module.ts，引入HammerModule并配置手势支持：

import { NgModule } from '@angular/core';
import { BrowserModule, HammerModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
import * as Hammer from 'hammerjs';

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';

// 自定义Hammer手势配置
export class CustomHammerConfig extends HammerGestureConfig {
  overrides = {
    pan: { direction: Hammer.DIRECTION_ALL },
    swipe: { direction: Hammer.DIRECTION_ALL }
  };
}

@NgModule({
  declarations: [
    AppComponent,
    MatchAnalysisComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule,
    HammerModule // 新增Hammer模块
  ],
  providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig } // 注册自定义配置
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 检查Capacitor WebView配置 #

在Android项目的MainActivity.java中确保WebView启用必要设置：

import com.getcapacitor.Bridge;
import com.getcapacitor.BridgeWebViewClient;
import android.webkit.WebView;

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // 原有初始化代码...

  getBridge().setWebViewClient(new BridgeWebViewClient(getBridge()) {
    @Override
    public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);
      view.getSettings().setDomStorageEnabled(true);
      view.getSettings().setJavaScriptEnabled(true);
      view.getSettings().setAllowFileAccess(true);
    }
  });
}

4. 重新构建部署 #

执行生产环境构建后同步并运行：

ng build --prod
npx cap sync android
npx cap run android

补充提示 #

如果模拟器测试仍有问题，建议改用真机测试，部分模拟器的触摸模拟可能存在兼容性问题。Material Slider的滑动依赖HammerJS的手势识别，确保所有配置步骤严格执行即可正常使用，无需放弃Material组件。

内容的提问来源于stack exchange，提问作者jce