Ionic 2 ionScroll事件不刷新视图 [英] Ionic 2 ionScroll event to not refresh view

问题描述

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

I add to the <ion-content> a ionScroll event which triggers the method foo() and in a <button ion-button> a click event which triggers foo() too. In my template I add for an example {{ x }} and the foo() method increments x.

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

The button click refreshs the view so that the new value is shown. The scrolling not. If I add a console.log this will print.

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

If i set the fokus to some element like a textbox or something, the view refreshs and the new value of x shows up.

有人知道为什么吗？

推荐答案

那是因为非常的事情有趣而强大的名为 Zones 。如果这个概念对您而言是新的，请参阅此处和此处很好的解释。

That's because something very interesting and powerfull called Zones. If the concept is new for you, please refer to here and here for a great explanation.

你可以在那里看到，

应用程序状态更改是由三件事引起：

Application state change is caused by three things:

1）事件 - 用户事件，如点击，更改，输入，提交，......

1) Events - User events like click, change, input, submit, …

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

2) XMLHttpRequests - E.g. when fetching data from a remote service Timers -

3）setTimeout（），setInterval（），因为JavaScript

3) setTimeout(),setInterval(), because JavaScript

...事实证明，当Angular实际上是
有兴趣更新视图时，这些是唯一的情况。

… it turns out that these are the only cases when Angular is actually interested in updating the view.

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

That's why the view is not being updated when you scroll, but it does when you touch any of the elements of the page (since it's a user event).

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

In order to fix this, one of the options is to let Angular know that it needs to be aware of some changes you're just about to make, because things will probably need to be updated. You can do that by running some code (the code that updates the x property) inside a zone, like this:

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事件不刷新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！