Evento de cambio de tamaño de ventana angular
Me gustaría realizar algunas tareas basadas en el evento de cambio de tamaño de la ventana (durante la carga y dinámicamente).
Actualmente tengo mi DOM de la siguiente manera:
<div id="Harbour">
<div id="Port" (window:resize)="onResize($event)" >
<router-outlet></router-outlet>
</div>
</div>
El evento se dispara correctamente
export class AppComponent {
onResize(event) {
console.log(event);
}
}
¿Cómo recupero el ancho y el alto de este objeto de evento?
Gracias.
<div (window:resize)="onResize($event)"
onResize(event) {
event.target.innerWidth;
}
o usando el decorador HostListener :
@HostListener('window:resize', ['$event'])
onResize(event) {
event.target.innerWidth;
}
Los objetivos globales admitidos son window, documenty body.
Hasta que https://github.com/angular/angular/issues/13248 se implemente en Angular, es mejor para el rendimiento suscribirse a eventos DOM de manera imperativa y usar RXJS para reducir la cantidad de eventos como se muestra en algunas de las otras respuestas.
Sé que esto se preguntó hace mucho tiempo, ¡pero ahora hay una mejor manera de hacerlo! Sin embargo, no estoy seguro de si alguien verá esta respuesta. Obviamente sus importaciones:
import { fromEvent, Observable, Subscription } from "rxjs";
Luego en tu componente:
resizeObservable$: Observable<Event>
resizeSubscription$: Subscription
ngOnInit() {
this.resizeObservable$ = fromEvent(window, 'resize')
this.resizeSubscription$ = this.resizeObservable$.subscribe( evt => {
console.log('event: ', evt)
})
}
¡Entonces asegúrese de cancelar la suscripción al destruir!
ngOnDestroy() {
this.resizeSubscription$.unsubscribe()
}
La respuesta de @Günter es correcta. Sólo quería proponer otro método más.
También puede agregar el enlace de host dentro del @Component()decorador. Puede colocar el evento y la llamada a la función deseada en la propiedad de metadatos del host de esta manera:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
host: {
'(window:resize)': 'onResize($event)'
}
})
export class AppComponent{
onResize(event){
event.target.innerWidth; // window width
}
}
