让MatSlider与ionic 5协同工作(垂直滑块)

Question

我试了好几个小时才让垂直滑块(像离子射程)起作用。似乎最好的选择是使用材质滑块。

我有很多问题让它在移动设备上工作，至少导入不是微不足道的，所以我想分享对我有用的东西。

Answer 1

首先安装锤子JS

npm install hammerjs 
npm install @types/hammerjs 

然后需要单独导入hammerjs

//in app.module.ts
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';
import { HammerModule } from '@angular/platform-browser';
import 'hammerjs';

然后将其添加到导入和提供程序中

//in app.module.ts
imports: [BrowserModule, IonicModule.forRoot(), NgxSliderModule, AppRoutingModule, HammerModule
    ],

providers: [
        { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }
    ],

然后在页面模块上，导入滑块

//in myComponent.module.ts
import { MatSliderModule } from '@angular/material/slider';

...
imports: [
    MatSliderModule,
  ],

现在您可以使用它了:)