无法使用 hammerjs 绑定数据

Question

我在屏幕上滑动并获得 x 与 hammerjs 的坐标，同时我试图通过数据绑定在 HTML 模板上查看 x 的值。当我滑动时，x 的值在控制台中发生变化，但该值未显示在 HTML 视图中。 x 的值（在 HTML 视图上）只有当我停止滑动并再次触摸屏幕时才会改变。

HTML

<ion-content id="ion-content">
  <div>
    x: {{x}}
  </div>
</ion-content>

TS

const ionContent = document.getElementById('ion-content');
const mc = new Hammer.Manager(ionContent);
const pan = new Hammer.Pan();
mc.add([pan]);
mc.get('pan').set({enable: true});
mc.on('pan', ev => {
  this.x = ev.center.x;
  console.log('x: ', this.x);
});

注意： 我在最新版本的 ionic-angular 中遇到了这个问题（在 android 中使用电容器插件）

Answer 1

来自 HammerJS 的 on 回调可能在 Angular 的区域之外执行，这意味着 Angular 不知道应该更新视图。

为了解决这个问题，您需要告诉 Angular 某些内容已更改并且需要更新视图：

  import { Component, Inject, NgZone, ... } from '@angular/core';

  // ...

  constructor(private ngZone: NgZone) { ... }

  // ...

  mc.on('pan', ev => {
    this.ngZone.run(() => {  // <-- like this!
      this.x = ev.center.x;
      console.log('x: ', this.x);
    });
  });

请记住，更新视图可能是一项昂贵的操作，因此只有在您确实需要更新视图时才使用区域（也许您不想在视图中显示每个平移事件，而只显示最后一个事件）例如）。

您可以在 the Angular docs or in this super helpful blog post.

中找到有关区域的更多信息

无法使用 hammerjs 绑定数据

Can't bind data with hammerjs

angular

ionic-framework

hammer.js