Angular 9 никогда не вызывает HammerGestureConfig.buildHammer

Question

После обновления до Angular 9 больше не работает Hammer. js. Мы расширили Angular HammerGestureConfig, как показано ниже: метод buildHammer должен быть вызван, но он никогда не вызывается.

В чем может быть проблема?

Answer 1

HammerModule необходимо импортировать в модуль приложения Angular.

  imports: [
    ...
    HammerModule
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    },
    ...
  ],
  ...

ivy: сделать поддержку Hammer древовидной. Ранее в приложениях Ivy по умолчанию включались провайдеры Hammer. С этим коммитом приложения, которым нужна поддержка Hammer, должны импортировать HammerModule в свой модуль root. ( # 32203 ) ( de8ebbd )

https://github.com/angular/angular/blob/9.0.0/CHANGELOG.md

Answer 2

Закомментируйте любой импорт для молотка js, который, вероятно, находится в вашем файле main.ts, который, вероятно, был добавлен в Angular 8 или ранее - для меня это был изначально проект Angular 4, которому 2 года развивались. Но Angular 9 не может использовать его там.

Переместите их все в app.module.ts в следующем порядке ...

import { HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
declare var Hammer: any;

Если вы используете его для считывания, например, для карусели, вам нужно будет экспортировать пользовательский класс. ..

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any> {
    'pan': { direction: Hammer.DIRECTION_All },
    'swipe': { direction: Hammer.DIRECTION_VERTICAL },
  };

  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
      touchAction: 'auto',
          inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
          recognizers: [
            [Hammer.Swipe, {
              direction: Hammer.DIRECTION_HORIZONTAL
            }]
          ]
    });
    return mc;
  }
}

Тогда в NgModule

@NgModule({
…
  imports: [
    HammerModule,

не забывайте провайдеров ...

  providers: [
    {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}

Должно работать с одним предупреждением в консоли ...

УСТАРЕЛО: DI создает экземпляр токена "MyHammerConfig", который наследует свой декоратор @Injectable, но не предоставляет его сам. Это станет ошибкой в ​​v10. Пожалуйста, добавьте @Injectable () в класс "MyHammerConfig".

Я все еще работаю над тем, чтобы исправить это, если у кого-то есть какие-либо предложения по поводу приведенного выше кода.

Answer 3

После обновления до Angular 9 мне пришлось повторно npm -установить hammerjs, так как он был удален из моего package.json. Я бы проверил, что твое все еще там.