时间戳

首页 > 解决方案 > Ionic 5 手势不适用于 Angular 绑定

angular - Ionic 5 手势不适用于 Angular 绑定

问题描述

如文档中所述，我有一个使用 GestureController 进行简单滑动手势的 Ionic 页面。在滑动结束事件中，我增加一个计数器。页面的 html 上有一个绑定，它没有得到更新。但是，Console.log() 会显示更新后的计数器。

是否存在已知问题或者我做错了什么？

页面模板

<ion-content #contentElement>
    {{ counter }}
</ion-content>

打字稿

export class TestPage {

  counter = 0;

  swipeGesture: Gesture;
  @ViewChild('contentElement', { static: true, read: ElementRef }) contentElement: ElementRef;

  constructor(private gestureController: GestureController) { }

  ionViewDidEnter() {
    this.swipeGesture = this.gestureController.create({
      el: this.contentElement.nativeElement,
      gestureName: 'swipe',
      onEnd: () => this.onSwipeEnd(),
    });
    this.swipeGesture.enable();
  }

  private onSwipeEnd() {
    this.counter++;
    console.log(this.counter);
  }

}

标签： angularionic-framework

解决方案

我有一个类似的问题，我所做的就是将它注入ChangeDetectorRef到构造函数中。

constructor(private ref: ChangeDetectorRef) {}

然后，您可以手动运行更改检测。

private onSwipeEnd() {
   this.counter++;
   console.log(this.counter);
   this.ref.detectChanges(); // Runs the change detection
}

推荐阅读