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

J'ai essayé de créer une barre de navigation réactive et je ne souhaite pas utiliser de requête multimédia, j'ai donc l'intention d'utiliser *ngIFla taille de la fenêtre comme critère. Mais j'ai rencontré un problème car je ne trouve aucune méthode ou documentation sur la détection de la taille de la fenêtre Angular 4. J'ai également essayé la méthode JavaScript, mais elle n'est pas prise en charge.

J'ai également essayé ce qui suit :

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.

Pour l'obtenir sur init

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

Si vous voulez le garder à jour lors du redimensionnement:

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

Si vous souhaitez réagir sur certains points d'arrêt (par exemple, faites quelque chose si la largeur est inférieure à 768px), vous pouvez également utiliser BreakpointObserver:

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

{ ... }

const isSmallScreen = breakpointObserver.isMatched('(max-width: 599px)');

ou même écouter les modifications apportées à ce point d'arrêt:

breakpointObserver.observe([
  '(max-width: 768px)'
    ]).subscribe(result => {
      if (result.matches) {
        doSomething();
      } else {
        // if necessary:
        doSomethingElse();
      }
    });

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

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 consommez ...

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

La documentation pour Platform width()et height(), il est indiqué que ces méthodes utilisent respectivement window.innerWidthet window.innerHeight. Mais l'utilisation des méthodes est préférable car les dimensions sont des valeurs mises en cache, ce qui réduit le risque de lectures DOM multiples et coûteuses.

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();
    });
}

Ceci est un exemple de service que j'utilise.

Vous pouvez obtenir la largeur de l'écran en vous abonnant à screenWidth$ou via screenWidth$.value.

La même chose est pour mediaBreakpoint$(ou mediaBreakpoint$.value)

import {
  Injectable,
  OnDestroy,
} from '@angular/core';
import {
  Subject,
  BehaviorSubject,
  fromEvent,
} from 'rxjs';
import {
  takeUntil,
  debounceTime,
} from 'rxjs/operators';

@Injectable()
export class ResponsiveService implements OnDestroy {
  private _unsubscriber$: Subject<any> = new Subject();
  public screenWidth$: BehaviorSubject<number> = new BehaviorSubject(null);
  public mediaBreakpoint$: BehaviorSubject<string> = new BehaviorSubject(null);

  constructor() {}

  init() {
    this._setScreenWidth(window.innerWidth);
    this._setMediaBreakpoint(window.innerWidth);
    fromEvent(window, 'resize')
      .pipe(
        debounceTime(1000),
        takeUntil(this._unsubscriber$)
      ).subscribe((evt: any) => {
        this._setScreenWidth(evt.target.innerWidth);
        this._setMediaBreakpoint(evt.target.innerWidth);
      });
  }

  ngOnDestroy() {
    this._unsubscriber$.next();
    this._unsubscriber$.complete();
  }

  private _setScreenWidth(width: number): void {
    this.screenWidth$.next(width);
  }

  private _setMediaBreakpoint(width: number): void {
    if (width < 576) {
      this.mediaBreakpoint$.next('xs');
    } else if (width >= 576 && width < 768) {
      this.mediaBreakpoint$.next('sm');
    } else if (width >= 768 && width < 992) {
      this.mediaBreakpoint$.next('md');
    } else if (width >= 992 && width < 1200) {
      this.mediaBreakpoint$.next('lg');
    } else if (width >= 1200 && width < 1600) {
      this.mediaBreakpoint$.next('xl');
    } else {
      this.mediaBreakpoint$.next('xxl');
    }
  }

}

J'espère que cela aide quelqu'un

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

@HostListener("window:resize", [])
public onResize() {
  this.detectScreenSize();
}

public ngAfterViewInit() {
    this.detectScreenSize();
}

private detectScreenSize() {
    const height = window.innerHeight;
    const width = window.innerWidth;
}

La réponse est très simple. écrivez le code ci-dessous

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Import this, and write at the top of your .ts file
import { HostListener } from "@angular/core";

@Component({
 selector: "app-login",
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit, OnDestroy {
// Declare height and width variables
scrHeight:any;
scrWidth:any;

@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
      this.scrHeight = window.innerHeight;
      this.scrWidth = window.innerWidth;
      console.log(this.scrHeight, this.scrWidth);
}

// Constructor
constructor() {
    this.getScreenSize();
}
}

Vous pouvez utiliser la méthode getter dactylographiée pour ce scénario. Comme ça

public get width() {
  return window.innerWidth;
}

Et utilisez-le dans un modèle comme celui-ci:

<section [ngClass]="{ 'desktop-view': width >= 768, 'mobile-view': width < 768 
}"></section>

Vous n'aurez besoin d'aucun gestionnaire d'événements pour vérifier le redimensionnement / de la fenêtre, cette méthode vérifiera automatiquement la taille à chaque fois.