Блог

У меня есть компонент, который показывает информацию за дни, которые циклически выполняются с помощью функций dayUp() и dayDown() . Они оба выглядят следующим образом:

   dayUp() {
    if (this.dayCount == 7) {
      return;
    }
    this.dayCount  ;
    if (this.dayCount == 0) {
      this.today = 'Today'
    } else if (this.dayCount == 1) {
      this.today = 'Tomorrow'
    } else if (this.dayCount == -1) {
      this.today = 'Yesterday'
    } else {
      this.today = '';
    }
    this.getSelectedDay(this.dayCount);
  }
  

Я вызываю эти функции с кнопками для каждой из них. Они работают должным образом и соответствующим образом обновляют представление новой информацией. Я пытаюсь добавить функцию прокрутки, чтобы сделать то же самое с жестами, используя HammerJS. Я его настроил, и прокрутки работают в правильных направлениях. У меня есть журнал консоли для тестирования. У меня есть dayDown() набор для прокрутки влево и dayUp() набор для прокрутки вправо. Из отладчика я могу сказать, что они оба действительно вызываются правильно, и функция выполняется и изменяет значение dayCount переменной. Проблема в том, что представление вообще не обновляется и не отвечает, как это происходит при вызове функций с кнопки. Чтобы было ясно, я вызываю ту же самую точную функцию с помощью кнопки, а также салфетки. Кнопки работают, как и ожидалось, но они не работают при вызове через swipe. Я не уверен, что является причиной этого. Код HammerJS приведен ниже:

     const switcher = document.getElementById('switcher');
    var mc = new hammer(switcher);
    mc.on('swipeleft', () => {
      console.log('left');
      this.dayDown();
    });
    mc.on('swiperight', () => {
      console.log('right');
      this.dayUp();
    });
  

Обновить

Вы также можете попытаться внедрить ChangeDetectorRef и вставить this.changeDetectorRef.detectChanges() функции обратного вызова после вызова ваших собственных функций

 private @ViewChild("myDiv") myBtn: ElementRef;

constructor(private changeDetectorRef: ChangeDetectorRef){}

myFunction() {
  const switcher = this.myBtn.nativeElement;
  var mc = new hammer(switcher);
  mc.on('swipeleft', () => {
    console.log('left');
    this.dayDown();
    this.changeDetectorRef.detectChanges()
  });
  mc.on('swiperight', () => {
    console.log('right');
    this.dayUp();
    this.changeDetectorRef.detectChanges()
  });
}
  

Старый ответ

Вам необходимо запустить код внутри NgZone, чтобы переменные изменялись за пределами области Angular, поскольку они являются обратными вызовами для API-интерфейсов Hammerjs.

Другое дело, что всегда лучше обращаться к элементам DOM с помощью ViewChild вместо прямого доступа к нему с помощью getElementById, querySelector … и т. д

 private @ViewChild("myDiv") myBtn: ElementRef;

constructor(private zone: NgZone){}

myFunction() {
  this.zone.run(_ => {
    const switcher = this.myBtn.nativeElement;
    var mc = new hammer(switcher);
    mc.on('swipeleft', () => {
      console.log('left');
      this.dayDown();
    });
    mc.on('swiperight', () => {
      console.log('right');
      this.dayUp();
    });
  });
}
  

Вы можете проверить это руководство для получения дополнительной информации: https://indepth.dev/gestures-in-an-angular-application /

Вам нужно создать экземпляр с new Hammer(switcher) помощью (H с заглавной буквы latter). Вот почему методы on не выполняются, потому что они не могут найти объект.