通过 HammerJS 调用时函数不是 运行

Question

我有一个组件显示使用函数 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 变量的值。问题是视图根本没有像从按钮调用函数时那样更新或响应。需要明确的是，我使用按钮和滑动调用了完全相同的功能。这些按钮按预期工作，但在通过滑动调用时它们不起作用。我不确定是什么原因造成的。 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();
    });

Answer 1

更新

你也可以尝试在调用自己的函数后在回调函数中注入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 范围之外更改变量，因为它们是 Hammerjs API 的回调。

另一件事是，使用 ViewChild 访问 DOM 元素总是比使用 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/

Answer 2

您需要使用 new Hammer(switcher)（H on Capital 后者）进行实例化。这就是为什么 on 方法不是 运行 因为它们找不到对象。