Ionic 2 ionScroll 事件不刷新视图

Question

我在<ion-content> 中添加了一个触发foo() 方法的ionScroll 事件，并在<button ion-button> 中添加了一个触发foo() 的点击事件。在我的模板中，我添加了一个示例 {{ x }}，foo() 方法递增 x。

按钮单击刷新视图，以便显示新值。滚动没有。如果我添加 console.log 这将打印。

如果我将 fokus 设置为某个元素，例如文本框或其他元素，则视图会刷新并且 x 的新值会出现。

有人知道为什么吗？

Answer 1

那是因为一个非常有趣和强大的东西叫做 Zones。如果这个概念对您来说是新概念，请参阅 here 和 here 以获得很好的解释。

如您所见，

应用程序状态变化是由三件事引起的：

1) 事件 - 用户事件，例如点击、更改、输入、提交……

2) XMLHttpRequests - 例如从远程服务获取数据时 计时器 -

3) setTimeout(),setInterval()，因为 JavaScript

... 事实证明，只有这些是 Angular 实际上是 有兴趣更新视图。

这就是为什么当你滚动时视图没有被更新，但是当你触摸页面的任何元素时它会更新（因为它是一个用户事件）。

为了解决这个问题，其中一个选项是让 Angular 知道它需要了解您即将进行的一些更改，因为可能需要更新。您可以通过在区域内运行一些代码（更新x 属性的代码）来做到这一点，如下所示：

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

@Component({...})
export class MyPage {

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

    public yourMethod(): void {
        this.ngZone.run(() => {
            // Update the x property here, and the view will be updated!
        });
    }
}