Ionic 2 ionScroll event to not refresh view

Question

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

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

如果我将fokus设置为像文本框之类的某个元素，视图将刷新并显示新值x。

有人知道为什么吗？

Answer 1

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

正如你可以看到那里，

应用程序状态的变化是由三个因素引起：

1）活动 - 用户的事件，如点击，改变，输入，提交，...

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

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

......事实证明，这是唯一的情况下，当角实际上是 有意更新视图。

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

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