web-dev-qa-db-ja.com

mat-slider：ドラッグ時にすぐに更新されない

Angular 5アプリで@ angular/materialを使用しています。Angular使用しているMaterialのバージョンは5.0.2です。@ angular /アニメーション5.1.2。

次のように、スライダーの非常に単純な使用例があります。

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

しかし、何らかの理由で、スライダーハンドルをドラッグすると、マウスが離されるまで新しい位置に移動しません。これは明らかにあまり良くありません。マテリアルデモを確認しましたが、期待どおりに機能します。マウスを動かすとスライダーが動き、マウスを放してもジャンプしません。

なぜこれが起こっているのかを提案できますか？職場でACに合格することはありません！

angularmaterial-designangular-material2
14
serlingpa

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の問題で コメント を見つけました、基本的に：

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

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

root.module.tsにあります。

46
Lee Richardson

同じ問題を抱えていましたが、polyfills.tsにhammerjsをインポートすることで修正しました

npm install hammerjs --save「import 'hammerjs';」を追加しますpolyfills.tsに。

これがうまくいかない場合は、何か他のことが起こっている可能性があります。また、「BrowserAnimationsModule」がapp.module.tsにインポートされていることを確認する必要があります

9
Paul Haggo

値が更新されず、(change) from (input)イベントはトリックでした。

2
bunt

MaterialModulesの前にBrowserAnimationsModuleをインポートすると、同じ問題が修正されました。

2
Adil B

マテリアルデザインにジェスチャーコントロールを追加するには、いくつかのセットアップを行う必要があります

  1. hammerjsをインストールしますnpm install hammerjs --save
  2. hammerjsタイプをインストールしますnpm install @ types/hammerjs --save-dev

  3. main.tsにhammerjsをインポートする

    import 'hammerjs';

    import {enableProdMode} from '@ angular/core';

  4. AppModule.tsのGestureConfigをオーバーライドする

プロバイダー：[{提供：HAMMER_GESTURE_CONFIG、useClass：GestureConfig}]

2
blazehub