无法使用 hammerjs 绑定数据
Can't bind data with hammerjs
我在屏幕上滑动并获得 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 中使用电容器插件)
来自 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.
中找到有关区域的更多信息
我在屏幕上滑动并获得 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 中使用电容器插件)
来自 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.
中找到有关区域的更多信息