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

我使用的是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>

我希望看到我的ion-header出现在滚动一个showBack CSS类，但它永远不会出现，不管event.scrollTop值。

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

来源

2017-07-24 Mike

只需添加引号即可尝试？我在试图帮助你的文档中发现了什么：https：//angular.io/guide/template-syntax#binding-targets –

为了什么触发它需要被角的区域内执行的变化检测。

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

}

来源

2017-07-24 15:03:51

这是固定的。你能解释这里的问题是什么吗？这有点令人困惑，因为'this.navBack'正在更新，只是没有更新视图，所以'ngZone'在做什么？ – Mike

不知怎么的'ionScroll'代码离开了Angulars区域并且打破了变化检测。所以我们使用'ngZone'手动触发变更检测。 –

它不应该是：

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

（你缺少单引号）

来源

2017-07-24 14:49:54

很可能 - 我已经尝试过了，但是班级仍然没有出现。同样，如果我在我的Typescript中将值默认为“true”，它总是显示并且不会被'ionScroll.subscribe'事件更新（这肯定会被调用）。 – Mike

Wierd，为什么不尝试[class.showBack] =“navBack” - 这是经常使用一个类时使用 –

不 - 也是如此。我也把它放在一个'div'上，以防''ion-header'有一些奇怪的功能来防止类操作，但它在那里是一样的。似乎在Typescript中进行的更改不会更新视图中的变量。 – Mike

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

回答

相关问题