6
votes

Le curseur de matériau angulaire ne glisse pas

J'utilise mat-slider et, en essayant de faire glisser le contrôle à l'aide de la souris, il ne glisse pas, ni à gauche ni à droite. Cela ne fonctionne que lorsque je clique sur un point de la ligne coulissante. Mon code est:

<div>
    <mat-slider></mat-slider>
</div>


3 commentaires

Avez-vous importé MatSliderModule depuis '@ angular / material / slider' ;?


Oui je l'ai importé


ajoutez de la largeur à mat-slider, mat-slider {width: 300px; }


6 Réponses :


2
votes

Je pense que vous devriez installer HammerJS dans votre projet:

npm install hammerjs


0 commentaires

5
votes

J'ai trouvé la réponse ici . En gros, j'ai importé MaterialModule après BrowserAnimationsModule


0 commentaires

13
votes

Pour ceux qui utilisent le chargement différé, importez d'abord ceci:

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

Et ensuite, placez-le dans le module racine de l'application:

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

Consultez ce problème pour plus d'informations

p >


1 commentaires

Cela a sauvé la journée! Merci!



6
votes

Je sais que je suis en retard, mais si quelqu'un tombe sur ce problème avec la dernière version de matériel (8.2.1), vous devez installer hammerjs et l'importer dans votre fichier main.ts en utilisant les commandes ci-dessous

Installer

import 'hammerjs';

importer sur le fichier main.ts

npm install hammerjs


0 commentaires

3
votes

Sur Angular 9, l'installation de Hammer JS a fonctionné pour moi comme d'autres l'ont indiqué.

  1. npm install hammerjs
  2. Ajoutez-le à app.module - importe: [..., HammerModule]

0 commentaires

0
votes

Vous pourriez déjà avoir Hammerjs installé et importé dans le module de l'application, et peut-être que cela n'a pas fonctionné pour vous.

Vérifiez dans le fichier polyfills.ts vous avez importé hammersjs et @ angular / animations . Ce fichier se trouve dans src / polyfills.ts . Ouvrez-le. Si vous ne trouvez pas le code suivant, collez-le dans le fichier polyfills.ts .

Remarque: il ne doit pas être commenté, oeil.

import 'hammerjs';
import '@angular/animations';


0 commentaires