Wykrywanie zmian rozmiaru okna w czasie rzeczywistym w Angular 4

Próbowałem zbudować responsywny pasek nawigacyjny i nie chcę używać zapytania o media, więc zamierzam użyć *ngIFjako kryterium rozmiaru okna. Ale napotkałem problem, ponieważ nie mogę znaleźć żadnej metody ani dokumentacji dotyczącej wykrywania rozmiaru okna Angular 4. Próbowałem również metody JavaScript, ale nie jest ona obsługiwana.

Próbowałem również następujących rzeczy :

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

... który był używany w jonowym.

I screen.availHeight, ale nadal bez sukcesu.

Aby uzyskać to na init

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

Jeśli chcesz, aby był aktualizowany przy zmianie rozmiaru:

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

Jeśli chcesz zareagować na określone punkty przerwania (np. Zrobić coś, jeśli szerokość jest mniejsza niż 768px), możesz również użyć BreakpointObserver:

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

{ ... }

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

lub nawet posłuchaj zmian w tym punkcie przerwania:

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

Jeśli chcesz, aby komponenty były łatwe do testowania, powinieneś opakować globalny obiekt okna w usługę Angular:

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

Następnie możesz wstrzyknąć go jak każdą inną usługę:

constructor(
    private windowService: WindowService
) { }

I konsumuj ...

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

W dokumentacji dla Platform width()i height()stwierdzono, że te metody używają odpowiednio window.innerWidthi window.innerHeight. Jednak preferowane jest używanie tych metod, ponieważ wymiary są wartościami zapisanymi w pamięci podręcznej, co zmniejsza ryzyko wielokrotnych i kosztownych odczytów 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();
    });
}

To jest przykład usługi, z której korzystam.

Możesz uzyskać szerokość ekranu, subskrybując screenWidth$lub przezscreenWidth$.value .

To samo dotyczy mediaBreakpoint$(lub 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');
    }
  }

}

Mam nadzieję, że to komuś pomoże

możesz użyć tego https://github.com/ManuCutillas/ng2-responsive Mam nadzieję, że to pomoże :-)

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

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

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

Odpowiedź jest bardzo prosta. napisz poniższy kod

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

W tym scenariuszu można użyć metody pobierającej tekst. Lubię to

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

I użyj tego w szablonie w ten sposób:

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

Nie będziesz potrzebować żadnego programu obsługi zdarzeń, aby sprawdzić zmianę rozmiaru / okna, ta metoda sprawdzi rozmiar za każdym razem automatycznie.