Angular материал мат-слайдер не работает должным образом с молотком. js - PullRequest
Новая
       45

Angular материал мат-слайдер не работает должным образом с молотком. js

0 голосов
/ 04 апреля 2020

Я застрял на этом некоторое время, поэтому поделился этим (что активно поощряется в SO) на случай, если другие столкнутся с той же проблемой.

Проблема

В Angular при создании пользовательской конфигурации Hammer. js для предотвращения блокировки вертикальной прокрутки страницы и использования Angular Material mat-slider , вы можете обнаружить, что действие ползунка не работает гладко, или позволить перетаскивать ползунок.

Если вы похожи на меня, вы следовали предложениям онлайн, вы, вероятно, создали пользовательскую конфигурацию Hammer в app.module.ts , например: 

export class MyHammerConfig extends HammerGestureConfig {
  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
    touchAction: 'pan-y'
  });

  return mc;
 }
}

С объявлением провайдера: 

{provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}

Приведенная выше конфигурация гарантирует, что Hammer обрабатывает только горизонтальные пролистывания, позволяя событиям вертикального пролистывания достигать браузера, чтобы прокручивать страницу вверх и вниз.
Однако, если вам случится использовать Angular Материал mat-slider и пользовательский класс конфигурации Hammer могут вызвать проблемы с действием ползунка.

Как упоминалось ранее, я отвечу на свой вопрос ниже.

Используемые версии:
Angular 8.0.0
Angular Материал 8.0.0

1 Ответ

1 голос
/ 04 апреля 2020

Чтобы устранить проблему с Angular Material mat-slider , когда используется пользовательская конфигурация Hammer, вы просто расширяете класс GestureConfig от "angular / material" вместо HammerGestureConfig: 

import { GestureConfig } from '@angular/material';

export class MyHammerConfig extends GestureConfig  {
  buildHammer(element: HTMLElement) {
    return new GestureConfig({touchAction: 'pan-y'}).buildHammer(element);
  }
}

Это должно решить проблему с ползунком.

Кредит для публикации в Github:
https://github.com/angular/components/issues/4278#issuecomment -399572805

...