angular - Ionic 2 ionScroll 事件不刷新 View

Question

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

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

如果我将 fokus 设置为文本框之类的某个元素， View 会刷新并显示新值 x出现。

有人知道为什么吗？

Answer 1

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

如您所见，

Application state change is caused by three things:

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

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

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

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

这就是为什么当您滚动时 View 不会更新，但当您触摸页面的任何元素时它会更新(因为这是一个用户事件)。

为了解决这个问题，其中一个选项是让 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!
        });
    }
}