有條件的類不總是在Angular 2上觸發

我有以下的代碼片段，它可以在Chrome，Edge上正常工作，但是在某些版本的IE 11和Firefox上沒有這麼好。有條件的類不總是在Angular 2上觸發

在某些版本的IE 11上，並不總是設置類，並且在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; 
}

來源

2016-10-25 Gerald Hughes

據我所知滾動前夕因爲polyfills的限制，nt不會在所有瀏覽器的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區內執行。

來源

2016-10-25 13:30:17

默認應用CSS並隱藏該元素。如果條件適用，則顯示元素（或應用將顯示它的類）。那麼你不會在頁面加載過程中跳躍。

來源

2016-10-25 13:30:58 danday74

有條件的類不總是在Angular 2上觸發

回答

相關問題