Angular 4'te gerçek zamanlı pencere boyutu değişikliklerini algılama

Duyarlı bir gezinme çubuğu oluşturmaya çalışıyordum ve bir medya sorgusu kullanmak istemiyorum, bu yüzden *ngIFbir kriter olarak pencere boyutuyla kullanmayı planlıyorum . Ancak Angular 4 pencere boyutu algılamasında herhangi bir yöntem veya belge bulamadığım için bir sorunla karşı karşıyayım. JavaScript yöntemini de denedim, ancak desteklenmiyor.

Aşağıdakileri de denedim :

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

... iyonik olarak kullanıldı.

Ve screen.availHeightyine de başarı yok.

Başlamak için

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

Yeniden boyutlandırmada güncel kalmasını istiyorsanız:

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

Belirli kesme noktalarına tepki vermek istiyorsanız (örneğin, genişlik 768 pikselden azsa bir şeyler yapın), BreakpointObserver'ı da kullanabilirsiniz:

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

{ ... }

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

hatta bu kesme noktasındaki değişiklikleri dinleyin:

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

Bileşenlerinizin kolayca test edilebilir kalmasını istiyorsanız, global pencere nesnesini bir Angular Service içine sarmalısınız:

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

Daha sonra herhangi bir hizmet gibi enjekte edebilirsiniz:

constructor(
    private windowService: WindowService
) { }

Ve tüketin ...

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

Belgeleri Platform width()ve height()halen bu yöntemlerin kullandığını dile getirilmiştir window.innerWidthve window.innerHeightsırasıyla. Ancak boyutlar önbelleğe alınmış değerler olduğu için yöntemlerin kullanılması tercih edilir, bu da birden çok ve pahalı DOM okuma olasılığını azaltır.

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

Bu, kullandığım bir hizmet örneğidir.

Ekran genişliğini abone olarak screenWidth$veya aracılığıyla alabilirsinizscreenWidth$.value .

Aynısı mediaBreakpoint$(veya mediaBreakpoint$.value) için

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

}

Umarım bu birine yardımcı olur

Bu https://github.com/ManuCutillas/ng2-responsive kullanabilirsiniz Umarım yardımcı olur :-)

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

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

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

Cevap çok basit. aşağıdaki kodu yaz

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

Bu senaryo için typcript getter yöntemini kullanabilirsiniz. Bunun gibi

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

Ve bunu şu şekilde bir şablonda kullanın:

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

Pencereyi yeniden boyutlandırmak için herhangi bir olay işleyicisine ihtiyacınız olmayacak, bu yöntem her seferinde boyutu otomatik olarak kontrol edecektir.