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!
        });
    }
}

Ionic 2 ionScroll事件不刷新视图

1 个答案: