Question

我在Angular 5 app中使用@ angular / material。我使用的Angular Material的版本是5.0.2。我正在使用@ angular / animations 5.1.2。

我有一个非常简单的滑块用例，如下所示：

<mat-slider style="width:100%;"></mat-slider>

但出于某种原因，拖动滑块手柄时，在释放鼠标之前它不会移动到新位置，这显然不是很好。我已经检查了Material演示，并且按预期工作：滑块在鼠标移动时移动，并且在释放鼠标时不会跳转。

有谁能说明为什么会这样？它永远不会在工作中通过AC！

Answer 1

即使在按Step 5 Gesture Support安装hammerjs之后，也不适合我。

一些组件（mat-slide-toggle，mat-slider，matTooltip）依靠HammerJS进行手势。为了获得这些组件的完整功能集，必须将HammerJS加载到应用程序中。

...

NPM

npm install --save hammerjs

纱线

yarn add hammerjs

安装完成后，将其导入应用的入口点（例如src / main.ts）。

import 'hammerjs';

然而，我终于在github上的问题中找到a comment来解决它，基本上：

import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

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

在root.module.ts中

。

Answer 2

我遇到了同样的问题，通过在polyfills.ts中导入hammerjs来修复

npm install hammerjs --save 添加＆＃34; import＆＃39; hammerjs＆＃39;;＆＃34;到polyfills.ts。

如果这不起作用，你可能会有其他事情发生。你还应该确保＆＃34; BrowserAnimationsModule＆＃34;在app.module.ts

中导入

Answer 3

我遇到了相关的问题w /值没有更新，区分- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler和(change)事件就是伎俩。

Answer 4

在材质设计中添加手势控制需要完成一些设置

安装Hammerjs npm install hammerjs --save
安装Hammerjs类型 npm install @ types/hammerjs --save-dev
在main.ts上导入Hammerjs

导入'hammerjs';

从'@ angular / core'导入{enableProdMode};
在AppModule.ts中覆盖GestureConfig

提供者：[{提供：HAMMER_GESTURE_CONFIG，useClass：GestureConfig }]

Answer 5

在maps camel case properties in JSON to the POCO properties by default此处打开的问题中找到了答案

使用Angular 9及更高版本，您应在此导入旁边导入HammerModule

import {BrowserModule, HAMMER_GESTURE_CONFIG, HammerModule} from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

imports: [
...
BrowserAnimationsModule,
BrowserModule,
MatSliderModule,
HammerModule,
]

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

Answer 6

我在通过在MaterialModules之前导入BrowserAnimationsModule修复了同样的问题。

mat-slider：拖动时不立即更新

6 个答案: