Detectar el tamaño de la ventana usando Angular 4

He estado tratando de construir una barra de navegación sensible y no deseo usar una consulta de medios, por lo que pretendo usar *ngIF con el tamaño de la ventana como criterio. Pero me he estado enfrentando a un problema ya que no puedo encontrar ningún método o documentación sobre la detección de tamaño de ventana Angular 4. También he probado el método JavaScript, pero no es compatible.

También he probado el siguiente:

constructor(platform: Platform) {
    platform.ready().then((readySource) => {
        console.log('Width: ' + platform.width());
        console.log('Height: ' + platform.height());
    });
}

...que se utilizó en ionic.

Y screen.availHeight, pero todavía sin éxito.

 23
angular
Author: BBaysinger, 2017-07-27
Source

4 answers

Para obtenerlo en init

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}

Si quieres mantenerlo actualizado en redimensionar: 

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}
 60
Author: Eduardo Vargas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-27 12:26:05

La documentación para Platform width() y height(), se sostiene que estos métodos utilizan window.innerWidth y window.innerHeight, respectivamente. Pero el uso de los métodos son preferidas ya que las dimensiones son valores almacenados en caché, lo que reduce la posibilidad de múltiples y costosas lecturas DOM.

import { Platform } from 'ionic-angular';

...
private width:number;
private height:number;

constructor(private platform: Platform){
    platform.ready().then(() => {
        this.width = platform.width();
        this.height = platform.height();
    });
}
 3
Author: robbannn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-27 13:48:19

Puede usar esto https://github.com/ManuCutillas/ng2-responsive Espero que ayude :-)

 2
Author: Fabián Carrasco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-27 12:24:33

Si desea que sus componentes permanezcan fácilmente comprobables, debe envolver el objeto global window en un servicio Angular: 

import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

Luego puede inyectarlo como cualquier otro servicio:

constructor(
    private windowService: WindowService
) { }

Y consumir...

  ngOnInit() {
      const width= this.windowService.windowRef.innerWidth;
  }
 1
Author: Kildareflare,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-17 10:46:49