Angular 4에서 실시간 창 크기 변화를 감지합니다.

Angular 4에서 실시간 창 크기 변화를 감지합니다.

응답성 있는 탐색 막대를 만들려고 했지만 미디어 쿼리를 사용하지 않으려 하므로 사용하려고 합니다.*ngIf창 크기를 기준으로 합니다.그러나 Angular 4 창 크기 검출에 대한 방법이나 문서를 찾을 수 없어 문제가 발생하고 있습니다.JavaScript 메서드도 시도해 봤지만 지원되지 않습니다.

다음을 시도했습니다.

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

이온에 사용됐죠

그리고.screen.availHeight하지만 여전히 성공하지 못했습니다.

초기화 시 입수합니다.

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

크기 조정 시 업데이트 상태를 유지하려면 다음을 수행합니다.

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

특정 중단점에 반응하려면(예: 너비가 768px 이하인 경우 작업을 수행) 다음을 사용할 수 있습니다.

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

이것은 제가 사용하는 서비스의 예입니다.

다음 항목에 가입하여 화면 폭을 얻을 수 있습니다.screenWidth$, 또는 경유합니다.screenWidth$.value.

에 대해서도 마찬가지입니다.mediaBreakpoint$( 또는 )을 클릭합니다.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() {
    this.init();
  }

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

}

이게 도움이 됐으면 좋겠네요

구성 요소를 테스트 가능한 상태로 유지하려면 글로벌 창 개체를 Angular Service에서 래핑해야 합니다.

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

그런 다음 다른 서비스처럼 주입할 수 있습니다.

constructor(
    private windowService: WindowService
) { }

그리고 소비합니다...

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

에 대한 설명서입니다.Platform width() 및 , 이 방법들은 다음을 사용한다고 명시되어 있습니다.window.innerWidth그리고.window.innerHeight각각 다음과 같다.그러나 차원이 캐시된 값이기 때문에 비용이 많이 드는 다중 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();
    });
}

답은 매우 간단합니다. 아래 코드를 쓰십시오.

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

이 시나리오에는 typscript getter 방법을 사용할 수 있습니다.이것처럼.

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

템플릿에 다음과 같이 사용합니다.

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

크기 조정// 창을 확인하는 데 이벤트 핸들러가 필요하지 않습니다. 이 방법은 매번 자동으로 크기를 확인합니다.

이 질문은 원래 화면 크기에 대한 것이므로 기본적으로 다음과 같습니다.width그리고.height특성,Breakpoints 그러나 대부분의 사람들에게 중요한 것은, 따라서, 글로벌 재사용 가능한 솔루션을 만들기 위해, 저는 사용하는 것을 사용하는 것을 선호합니다.Angular의 경우입니다.BreakpointObserver이 일을 처리할 수 있어요

다음 구성은 기본적으로 다음과 같습니다.service함께요functions그건 할 수 있어요return네, 그렇습니다.Observable<BreakpointState>그리고 있습니다subscribed필요한 경우 다음을 수행합니다.

import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ScreenService {

  constructor(private observer: BreakpointObserver) {}

  isBelowSm(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 575px)']);
  }

  isBelowMd(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 767px)']);
  }

  isBelowLg(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 991px)']);
  }

  isBelowXl(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 1199px)']);
  }
}

위 코드는 화면 크기를 처리하도록 조정할 수 있습니다.bootstrapway(각 값을 로 변경하고 더하는 방법, 물론 역s 이름으로 바꿉니다.)

자, 그럼 이번에는 ㅇㅇㅇㅇㅇㅇㄹ게요.component class 간단히 말하면 , , , , , , , , , , , , , , , , , , , .subscribingthe toobservable이겁니다.

예를 들어 다음과 같습니다.

export class AppComponent implements AfterViewInit {

  isBelowLg: boolean;

  constructor(private screenService: ScreenService) {}

  ngAfterViewInit(): void {
    this.screenService.isBelowLg().subscribe((isBelowLg: BreakpointState) => {
      this.isBelowLg = isBelowLg.matches;
    });
  }
}

이렇게 하다를 사용해서 참고하세요.AfterViewInit라이프 사이클 훅을 사용하면 수고를 덜 수 있습니다.detectChanges()이겁니다.

편집합니다.

대신으로 사용해요.AfterViewInit, 그 외에도 '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', '아까', 이렇게 써야 돼요.ChangeDetectorRef로로 이동합니다.detectChanges()는 다음과 같이 가입 구성 요소에 인스턴스를 주입하기만 하면 됩니다.

constructor(
    private screenService: ScreenService,
    private cdref: ChangeDetectorRef
  ) {}

그리고 그 후에 그냥 전화 한 통만 걸면 됩니다.detectChanges()이겁니다.

this.cdref.detectChanges();

https://github.com/ManuCutillas/ng2-responsive을 이용하실 수 있습니다. 도움이 되길 바랍니다:-)

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

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

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

언급URL : https://stackoverflow.com/questions/45350716/detecting-real-time-window-size-changes-in-angular-4 입니다.