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

【问题标题】：class binding and ngClass not working in angular2类绑定和 ngClass 在 angular2 中不起作用
【发布时间】：2016-04-26 09:02:57
【问题描述】：

我的模板是：

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

我的班级有一个名为“scrollOnTop”的公共属性，它可以根据滚动事件而改变。

我的班级：

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 具有“特殊”类。但如果属性“scrollOnTop”更改为 false，则不会删除“特殊”类。

请帮忙

【问题讨论】：

从哪里调用onScrollEvent()？
onScroll 功能工作正常，因为我正在检查日志。此事件是从检查 window.scroll 事件的指令发出的
如何调用它仍然是相关的。是否在 Angulars 区域内调用它。如果您正在收听window.onScroll，您可以尝试我添加到更新答案中的建议。
blog.thoughtram.io/angular/2016/02/22/…, victorsavkin.com/post/110170125256/…。如果 Angular 没有认识到它需要运行更改检测，那么无论值是否更改，Angular 都不会更新视图。
谢谢大家，@Thierry Templier 和 Gunter。谢谢你的协助。另外，现在我知道 Angular2 中区域的惊人概念

标签： angular angular2-template angular2-directives

【解决方案1】：

更新

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;
    });
    ...

  }
}

【讨论】：

我很困惑...你要我实现上面的代码吗？我认为放入区域会引起问题。我对区域不是很熟悉
这只是一个猜测。请提供有关您如何设置scrollOntop 的更多信息。我认为我上面的建议值得一试，以了解这是否解决了您的问题，然后检查实际导致它的原因。

【解决方案2】：

我会改用ngClass：

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

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

【讨论】：

如果scrollOnTop 真的更新了？您可以添加更新其值的代码吗？谢谢！
onScroll方法是如何调用的？
onScroll 方法是从事件中调用的。该事件是从检查 window.onScroll 事件的指令触发的。这个方法运行良好，我可以看到日志
我认为问题是 Günter 所说的。该方法是否在区域内执行？如果没有，您将在跟踪中看到更新，但 Angular2 无法检测到它。您能否尝试像他指出的那样将scrollOnTop 属性的更新包装到run 方法中？
它在后台处理。默认情况下，除了在 Angular2 之外实例化的对象外，没有什么可做的。在您的情况下，触发事件的对象不受 Angular2 管理，因此它在区域外执行。要显式执行到区域中，只需注入 NgZone 对象并将代码执行到您在其 run 方法中提供的回调中...

【解决方案3】：

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

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

【讨论】：