How to implement infinite scroll with RouteReuseStrategy. Always emit scrolled events.

In our application we are using RouteReuseStrategy to reapply elements.

Intinite scroll is used with the following settings: infiniteScroll [infiniteScrollDistance]="0" [infiniteScrollThrottle]="250" When component is detached, window scroll event handler is still persist for infiniteScroll, causing it to emitting (scrolled) event every scroll.

Why is it emitting scrolled events when its not in a viewport?

[konstantinosftw]

Hey @Omi0, I managed to make your solution work!

Tips for anyone stuck:

1. Once you add all of Omi0’s code to your project, you need to replace your app’s <router-outlet> with the new <app-router-outlet> that you just created from the article.
2. If you want to stop listeners that run on child components, you’ll need to call changeDetectorRef.detectChanges() after any change you make in your parent’s onDetach() function, like so:

onDetach() { 
  this.isDetached = true;   // or any other variable you are passing to the child
  this.changeDetectorRef.detectChanges();   // to detect the above change and actually send the variable to the child
}

[Omi0]

@konstantinosftw I have even written an article about it. Scroll to 3 method. Hope it answers your question.