Détection des changements de taille de fenêtre en temps réel dans Angular 4

Question

J'ai essayé de créer une barre de navigation réactive et je ne souhaite pas utiliser une requête multimédia. *ngIf avec la taille de la fenêtre comme critère. Mais j'ai été confronté à un problème car je suis incapable de trouver une méthode ou une documentation sur la détection de la taille de la fenêtre dans Angular 4. J'ai également essayé la méthode JavaScript, mais elle n'est pas prise en charge.

J'ai également essayé le suivant :

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

...qui a été utilisé en ionique.

Et screen.availHeight mais toujours pas de succès.

Answer 1

Pour l'obtenir sur init

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

Si vous voulez le garder à jour sur le redimensionnement :

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}

Answer 2

Si vous voulez réagir à certains points d'arrêt (par exemple, faire quelque chose si la largeur est de 768px ou moins), vous pouvez utiliser la fonction BreakpointObserver :

import { Component } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    private breakpointObserver: BreakpointObserver,
  ) {
    // detect screen size changes
    this.breakpointObserver.observe([
      "(max-width: 768px)"
    ]).subscribe((result: BreakpointState) => {
      if (result.matches) {
          // hide stuff        
      } else {
          // show stuff
      }
    });
  }
}

Answer 3

Si vous souhaitez que vos composants restent facilement testables, vous devez envelopper l'objet fenêtre global dans un service Angular :

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

Vous pouvez ensuite l'injecter comme n'importe quel autre service :

constructor(
    private windowService: WindowService
) { }

Et consommer...

  ngOnInit() {
      const width= this.windowService.windowRef.innerWidth;
  }

Answer 4

La documentation pour Platform width() y height() il est précisé que ces méthodes utilisent window.innerWidth y window.innerHeight respectivement. Mais l'utilisation de ces méthodes est préférable car les dimensions sont des valeurs mises en cache, ce qui réduit les risques de lectures multiples et coûteuses du 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();
    });
}

Answer 5

Vous pouvez utiliser ce https://github.com/ManuCutillas/ng2-responsive J'espère que cela vous aidera :-)