Angular 4 - 属性值未在 View 中更新

Question

我有一个 HomePage 页面，其属性 shouldNavBeTransparent: boolean = true 指示页面的 navbar 是否应该有一个 class="是否透明。

在窗口达到其高度的 90% 后，我将属性 shouldNavBeTransparent 设置为 true。

我的问题是 View 中的属性未更改。在 View 中，它始终为 false，而在组件中，它正在发生变化。

这是我的home.ts 文件:

import {Component} from '@angular/core';
import {IonicPage} from 'ionic-angular';

@IonicPage({segment: "/"})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  services: Array<{ icon: string, title: string, subhead: string, content: string }>;

  shouldNavBeTransparent: boolean = true;

  scrollHandler($event) {
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    console.log(this.shouldNavBeTransparent);
  }
}

scrollHandler 中的console.log 输出true 和false，这表明它正在发生变化:

我在 View 中检查属性的部分是 (home.html):

<ion-header [class.transparent]="shouldNavBeTransparent">

我触发滚动事件的部分:

<ion-content (ionScroll)="scrollHandler($event)">

即使我写 {{ shouldNavBeTransparent }} 我得到的都是真的。

---

我正在使用 Ionic v3.19.1

Answer 1

经过一些研究，我发现您需要使用 ngZone。

滚动事件发生在 Angular 的区域之外。这是出于性能原因。因此，如果您尝试将值绑定(bind)到任何滚动事件，则需要将其包装在 zone.run()

import { Component, NgZone } from '@angular/core';
 constructor( public zone: NgZone){}
scrollHandler($event) {
   this.zone.run(()=>{
     // the update needs to happen in zone
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    console.log(this.shouldNavBeTransparent);
   })