angular - 条件类并非总是在Angular 2上触发

下面的代码片段在chrome、edge上运行得很好，但在ie 11和firefox的某些版本上效果不太好。
在IE11的某些版本中，类并不总是被设置的，而在Firefox上它有一些延迟。
有什么办法能做得更好吗？
//TS

this.scrollYSub = Observable.fromEvent(window, 'scroll')
    .throttleTime(5)
    .subscribe(e => {
        this.scrollY = window.scrollY || document.documentElement.scrollTop;
});

//html

<nav id="nav" [class.fixednav]="scrollY >= 245">

/*CSS*/

.fixednav {
    position: fixed;
    top: 95px;
}

最佳答案

据我所知，由于polyfill的限制，scroll事件不会在所有浏览器的angulars区域内运行。

constructor(private cdRef:ChangeDetectorRef /* or private zone:NgZone */) {}

this.scrollYSub = Observable.fromEvent(window, 'scroll')
    .throttleTime(5)
    .subscribe(e => {
        this.scrollY = window.scrollY || document.documentElement.scrollTop;
        this.cdRef.detectChanges();

        // or
        /*
        this.zone.run(() {
          this.scrollY = window.scrollY || document.documentElement.scrollTop;
        });
        */
});

如果代码只更改当前组件的本地属性，this.cdRef.detectChanges();通常是更好的方法。
如果代码还调用导致其他组件或服务更改的方法，则首选zone.run(...)方法，因为它在整个应用程序中运行更改检测，而不是仅在当前组件中运行。
另一种方法是

scroll = new Subject();

@HostListener('window:scroll', ['$event'])
onScroll(event) {
  this.scroll.next(event);
}

因为这样可以确保事件处理程序在angulars区域内执行。

关于angular - 条件类并非总是在Angular 2上触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40241301/