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