조건부 클래스는 각도 2에서 항상 트리거되지 않습니다.

Question

Chrome, Edge에서 제대로 작동하는 다음 스 니펫이 있지만 Internet Explorer 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

을 nt는 polyfill의 한계로 인해 모든 브라우저에서 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(...) 접근 방식이 현재 구성 요소 대신 전체 응용 프로그램에서 변경 검색을 실행하기 때문에 선호됩니다. 이 방법은 이벤트 핸들러 Angulars 영역 내에서 실행을 보장하기 때문에

다른 방법은

scroll = new Subject(); 

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

이 될 것입니다.

Answer 2

기본적으로 CSS를 적용하고 요소를 숨 깁니다. 조건이 적용되면 요소를 표시하거나 표시 할 클래스를 적용합니다. 다음 페이지로드하는 동안 주위에 어떤 도약을 못해.