Question

我正在使用Ionic 2，它位于Angular 2之上。我希望在我的ion-header元素中添加一个类。这是为了让我最初让标题具有透明背景，但在滚动时具有坚实的背景。

我在我的Typescript文件中设置了一个变量，并在用户滚动时更新该变量。

我需要根据Typescript变量中的变量设置类。我已经在我的应用中使用[ngClass]="{showBack: navBack}"在其他地方完成了此操作，但这似乎无法在此页面上运行。

打字稿：

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  selector: 'page-class',
  templateUrl: 'class.html'
})
export class ClassPage {
  @ViewChild(Content)
  content: Content;
  navBack: boolean = false;

  constructor(...){}

  ngAfterViewInit() {
    this.content.ionScroll.subscribe((event) => {
      if(event.scrollTop == 0) {
        this.navBack = false;
      } else {
        this.navBack = true;
      }
    });
  }

}

HTML：

<ion-header [ngClass]="{showBack: navBack}">
  <ion-navbar>
    <ion-title>Test</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <p style="height: 300px">Long page of content here.</p>
  <p style="height: 300px">Long page of content here.</p>
  <p style="height: 300px">Long page of content here.</p>
</ion-content>

我希望在我的showBack上看到ion-header CSS类，它会在滚动状态下显示，但无论event.scrollTop的值是多少，它都不会出现。

我在console.log函数上使用ngAfterViewInit进行了一些调试，我可以确认变量是否正确更改，但是类没有更新。

Answer 1

不应该是：

[ngClass]="{'showBack': navBack}"

（你错过了单引号）

Answer 2

为了触发变化检测，需要在Angular的区域内执行。

import { Component, ViewChild, NgZone } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  selector: 'page-class',
  templateUrl: 'class.html'
})
export class ClassPage {
  @ViewChild(Content)
  content: Content;
  navBack: boolean = false;

  constructor(private ngZone: NgZone){}

  ngAfterViewInit() {
    this.content.ionScroll.subscribe((event) => {
      this.ngZone.run(() => {
          if(event.scrollTop == 0) {
            this.navBack = false;
          } else {
            this.navBack = true;
          }
    });
   });
}

}

如何在视图中实现动态类？

2 个答案: