javascript - Angular 2有条件地添加类

Question

我的目标是根据 Angular 2 的组件 bool 值设置或删除类。例如:isRed = true > 添加类“red”，如果 isRed = false > 删除类“red”。这怎么可能？代码尝试:

isRed: boolean;

constructor() {
    $(document).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(window.location.hash) {

        } else{
            this.isRed = true;
        }
        if(scrollTop > 50) {
            this.isRed = true;
        }
        else  {
            this.isRed = false;
        }
    });
}

和 html:

[ngClass]="{red: isRed}"

Answer 1

最简洁的方式是恕我直言

[class.red]="isRed"

更新

问题的原因是 function in

 $(document).scroll(function(){

应该使用箭头函数

 $(document).scroll(() => {

否则回调中的 this 将不会指向当前类，而是指向调用者。

我建议您尽量避免使用 Angular2 的 jQuery。改用

class MyComponent {

  constructor(private elRef:ElementRef) {}

  isRed:boolean;

  @HostListener('document:scroll', ['$event'])
  onScroll(event:any) {
    var scrollTop = this.elRef.nativeElement.scrollTop;
    // or
    $(this.elRef.nativeElement).scrollTop();

    if(window.location.hash) {

    } else{
        this.isRed = true;
    }
    if(scrollTop > 50) {
        this.isRed = true;
    }
    else  {
        this.isRed = false;
    }
  }
}