Tratando de descubrir cómo obtener el ancho de la ventana al cambiar el tamaño de los eventos en Angular2. Aquí está mi código:
export class SideNav { innerWidth: number; constructor(private window: Window){ let getWindow = function(){ return window.innerWidth; }; window.onresize = function() { this.innerWidth = getWindow(); console.log(getWindow()); }; }Estoy importando el proveedor de ventanas globalmente en el archivo bootstrap.ts usando provide para obtener acceso a través de mi aplicación a la ventana. El problema que tengo es que esto me da un tamaño de ventana, pero al cambiar el tamaño de la ventana, simplemente repite el mismo tamaño una y otra vez, incluso si la ventana cambia de tamaño. Ver imagen para el ejemplo de console.log: Imagen de captura de pantalla
Mi objetivo general es poder establecer el número de ventana en un tamaño variable para poder acceder a él en la plantilla. ¿Alguna idea sobre lo que estoy haciendo mal aquí?
¡Gracias!
<div (window:resize)="onResize($event)" onResize(event) { event.target.innerWidth; }para recibir notificaciones sobre eventos de desplazamiento en un elemento secundario en una plantilla de componentes
o escuchar en el propio elemento host de componentes
@HostListener('window:resize', ['$event']) onResize(event) { event.target.innerWidth; }Utilice NgZone para activar la detección de cambios:
constructor(ngZone:NgZone) { window.onresize = (e) => { ngZone.run(() => { this.width = window.innerWidth; this.height = window.innerHeight; }); }; }En este caso, debe ejecutar la detección de cambios manualmente. A medida que modifica la variable del componente desde el contexto externo de Angular, básicamente, el evento de cambio de tamaño no se parchea con el sistema de detección de cambios de Angular2.
Código
import {ChangeDetectorRef} from 'angular2/core' export class SideNav { innerWidth: number; constructor(private window: Window, private cdr: ChangeDetectorRef){ let getWindow = () => { return window.innerWidth; }; window.onresize = () => { this.innerWidth = getWindow(); this.cdr.detectChanges(); //running change detection manually }; } }Más bien, me gustaría sugerirle que busque esta respuesta , que se ve más limpia