无法用hammerjs绑定数据

Question

我在屏幕上滑动并使用hammerjs 获取x 坐标，同时我试图通过数据绑定在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 或这个超级有用的 blog post 中找到有关区域的更多信息。