Angular 4 - 视图中未更新属性值

Question

我有一个带有属性shouldNavBeTransparent: boolean = true 的HomePage 页面，它指示页面的导航栏 是否应该有class="transparent。

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

我的问题是视图中的属性没有被更改。在视图中，它始终为 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 输出真假，表示它正在改变：

我在视图中检查属性的部分是（home.html）：

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

我触发滚动事件的部分：

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

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

---

我正在使用 Ionic v3.19.1

Answer 1

在做了一些研究后，我发现你需要使用 ngZone。

滚动事件发生在 Angular 的区域之外。这是出于性能原因。因此，如果您尝试将值绑定到任何滚动事件，则需要将其包装在 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);
   })

Answer 2

您可以使用ngClass 有条件地分配类：

<div [ngClass]="{'yourclass':yourcondition}">

针对您的具体问题：

<ion-header [ngClass]="{'transparent':shouldNavBeTransparent}">

编辑：

import { ChangeDetectorRef } from '@angular/core';

constructor (private ref: ChangeDetectorRef) {}

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

this.ref.detectChanges(); 应该手动更新您的变量。