events - event - scroll angular 4

Rastreando la posición de desplazamiento y notificando a otros componentes al respecto

Question

¿Existe una manera fácil de rastrear la posición de desplazamiento del navegador y notificar al respecto más de un componente individual.

Caso de uso: en un desplazamiento, quiero poder cambiar las clases de varios elementos en la página en función de dónde estoy. En la versión anterior de angular, era algo posible a través del plugin afix (lo mismo para jQuery). Por supuesto, hay una opción de escribir JS desnudo inicializarlo en el inicio de la aplicación y emitir un evento. Suena sucio, y la emisión de eventos es bastante costosa para este tipo de cosas.

¿Cuáles son mis opciones aquí?

ACTUALIZACIÓN (después de sugerencias):

Entonces, esto es lo que intenté:

Creé un componente:

import {Component} from "angular2/core";
@Component({
selector: ''[track-scroll]'',
host: {''(window:scroll)'': ''track($event)''},
template: ''''
})
export class TrackScrollComponent {
track($event) {
console.debug("Scroll Event", $event);
}
}

atributo agregado a la directiva principal de una aplicación:

<priz-app track-scroll>

Y agregó el componente como uno de los proveedores en el componente superior:

import {TrackScrollComponent} from "../../shared/components/track-scroll.component";
@Component({
selector: ''priz-app'',
moduleId: module.id,
templateUrl: ''./app.component.html'',
directives: [ROUTER_DIRECTIVES, SecureRouterOutlet, AppHeader, TrackScrollComponent],
providers: [AuthenticationService]
})

Aún nada...

Otra actualización:

Se movió track-scroll a uno de los elementos div de la plantilla principal:

<div class="container-fluid" track-scroll>
<div class="row">
<div class="col-md-12">
<app-header></app-header>
<secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
</div>
</div>
</div>

Y ahora la aplicación se carga con una pantalla completamente vacía. DIVERSIÓN DIVERSIÓN DIVERSIÓN...

SOLUCIÓN FINAL (que funcionó para mí).

1. Definir una derectiva:

import {Directive} from "angular2/core";
@Directive({
selector: ''[track-scroll]'',
host: {''(window:scroll)'': ''track($event)''}
})
export class TrackScrollDirective {
track($event: Event) {
console.debug("Scroll Event", $event);
}
}

2. Añádalo como una directiva a cualquier lugar que lo use:

directives: [TrackScrollDirective]

3. Agregue el atributo a cualquier elemento donde deseemos rastrear el evento:

<div class="col-md-12" track-scroll>

Answer 1

Creo que la forma más fácil es que cada componente interesado escuche el evento de desplazamiento.

 @Component({
...
// alternative to `@HostListener(...)`
// host: {''(window:scroll)'': ''doSomething($event)''}
})
class SomeComponent {
@HostListener(''window:scroll'', [''$event''])
doSomething(event) {
// console.debug("Scroll Event", document.body.scrollTop);
// see András Szepesházi''s comment below
console.debug("Scroll Event", window.pageYOffset );
}
}

plunker

Plunker usando @HostListener()

Insinuación:

bootstrap(MyComponent, [
provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);

hace que la directiva sea universal sin agregarla a todas las directive: [...] componentes directive: [...] list.

Answer 2

Me vi obligado a resolver esto de manera diferente porque necesitaba ver varios elementos de desplazamiento en la ventana. Creé una directiva para ver la posición de desplazamiento en un elemento:

@Directive({
selector: ''[scroll]''
})
export class ScrollDir {
@Output() setScroll = new EventEmitter();
private scroll: number;
constructor(private el: ElementRef) { }
@HostListener(''scroll'', [''$event''])
scrollIt() { this.scroll = event.srcElement.scrollTop }
reset() { this.el.nativeElement.scrollTop = this.scroll }
}

Luego, en cualquier componente que contenga un elemento de desplazamiento que necesite este elemento, podría @ViewChild la directiva de esta manera:

@Component({
selector: ''parent'',
template: `
<div class="container" scroll>
// *ngFor=""...
</div>
`
})
export class ParentComp implements AfterViewChecked {
@ViewChild(ScrollDir) scroll: ScrollDir;
ngAfterViewChecked() {
this.scroll.reset()
}
}