Question

我的模板是：

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

我的班级名为＆＃34; scrollOnTop＆＃34;这可以根据滚动事件而改变。

我的班级：

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有＆＃34;特殊＆＃34;渲染模板时的类。但如果属性＆＃34; scrollOnTop＆＃34;变为假，＆＃34;特殊＆＃34;不删除类。

请帮忙

Answer 1

我会改用ngClass：

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

scrollOnTop属性是一个布尔值。如果为true，则添加special类，如果为false则删除。

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/

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

3 个答案: