Me gustaría realizar algunas tareas basadas en el evento de cambio de tamaño de ventana (en 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 , document y 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 hay una mejor manera de hacerlo ahora! 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 darse de baja en 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() . Puede colocar el evento y la llamada de función deseada en la propiedad de metadatos del host de la siguiente 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 } }