Angular 2 有条件地加上class

Question

我的目标是根据 Angular 2 的组件布尔值设置或删除 class。例如：isRed = true > add class "red"，if isRed = false > 删除 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 不会指向当前 class，而是指向调用者。

我建议您尽量避免使用 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;
    }
  }
}

Answer 2

这是 javascript 所以我会尝试这样的事情：

isRed; // there's no need to initialize this variable
          since the constructor has its own scope but hey,
          do it if you wish so

此外，您似乎没有在对象内部工作，因为您使用的是 ; 而不是 , 这意味着您不应使用“:”，而应使用“=”

Angular 2 有条件地加上class

Angular 2 add class conditionally

javascript

ng-class

angular