class 绑定和 ngClass 在 angular2 中不起作用

Question

我的模板是：

<div [class.special]="scrollOnTop" ></div>

我的 class 有一个名为 "scrollOnTop" 的 public 属性，它可以根据滚动事件改变。

我的Class:

export class AppComponent {
constructor() {
    console.log("class initiated with constructor");
    this.scrollOnTop = true;
};

public scrollOnTop: boolean;

onScroll(event){
    console.log("scroll event", event);
    if(event.belowTop){
        this.scrollOnTop = false;
        console.log("scroll on top is - " + this.scrollOnTop)
    }else{
        this.scrollOnTop = true;
        console.log("scroll on top is - " + this.scrollOnTop)
    }
}
};

div在模板渲染时有"special"class。但如果属性 "scrollOnTop" 更改为 false，则不会删除 "special" class。

请帮忙

Answer 1

我会用 ngClass 代替：

<div [ngClass]="{special: scrollOnTop}" ></div>

scrollOnTop 属性是布尔值。如果为真，则添加 special class，如果为假，则删除。

Answer 2

更新

export class AppComponent { 
  @HostBinding('window:scroll, ['$event'])
  onScroll(event){
    ..
  }
}

原创

我猜这是你设置的方式造成的scrollOnTop。

确保分配不在 Angulars 区域：

@Component({
  ...
})
export class MyComponent {
  constructor(private zone:NgZone) {}

  someMethod() {

    ...
    this.zone.run(() => {
      this.scrollOnTop = someValue;
    });
    ...

  }
}

Answer 3

我已经阅读了作者的以下文章，它涵盖了 Angular2 中几乎所有声明类型的样式

https://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/

class 绑定和 ngClass 在 angular2 中不起作用

class binding and ngClass not working in angular2

angular2-directives

angular2-template

angular