Angular 2有条件地添加类

Question

我的目标是根据具有Angular 2的组件布尔值来设置或删除类.例如:isRed = true> add class"red",如果isRed = false> remove class"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在于

 $(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;
    }
  }
}