条件付きクラスは必ず角2でトリガーしない

Question

Chrome、Edgeではうまく動作するが、IE 11とFirefoxの一部のバージョンではうまく動作しないスニペットがある。

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

Answer 1

私の知る限り、スクロール前夜を知っているようにpolyfillの制限のため、すべてのブラウザでAngularsゾーン内でntが実行されません。

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(...)アプローチが優先されます。

この方法は、イベントハンドラがAngularsゾーン内で実行されることを保証するので別の方法は

scroll = new Subject(); 

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

だろう。

Answer 2

デフォルトでCSSを適用し、要素を非表示にします。条件が適用される場合、要素を表示します（または表示するクラスを適用します）。その後、ページの読み込み中にジャンプすることはありません。