Phát hiện thay đổi kích thước cửa sổ thời gian thực trong Angular 4

Tôi đã cố gắng xây dựng một thanh điều hướng đáp ứng và không muốn sử dụng truy vấn phương tiện, vì vậy tôi định sử dụng *ngIFkích thước cửa sổ làm tiêu chí. Nhưng tôi đã gặp phải một vấn đề là tôi không thể tìm thấy bất kỳ phương pháp hoặc tài liệu nào về phát hiện kích thước cửa sổ Angular 4. Tôi cũng đã thử phương pháp JavaScript, nhưng nó không được hỗ trợ.

Tôi cũng đã thử những cách sau :

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

... được sử dụng trong ion.

Và screen.availHeight, nhưng vẫn không thành công.

Để có được nó trên init

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

Nếu bạn muốn cập nhật nó khi thay đổi kích thước:

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

Nếu bạn muốn phản ứng trên các điểm ngắt nhất định (ví dụ: làm điều gì đó nếu chiều rộng nhỏ hơn 768px), bạn cũng có thể sử dụng BreakpointObserver:

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

{ ... }

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

hoặc thậm chí lắng nghe những thay đổi đối với điểm ngắt đó:

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

Nếu bạn muốn các thành phần của mình vẫn có thể kiểm tra dễ dàng, bạn nên bọc đối tượng cửa sổ chung trong một Dịch vụ Angular:

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

Sau đó, bạn có thể tiêm nó giống như bất kỳ dịch vụ nào khác:

constructor(
    private windowService: WindowService
) { }

Và tiêu thụ ...

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

Tài liệu cho Platform width()và height(), nó nói rằng các phương pháp này sử dụng window.innerWidthvà window.innerHeighttương ứng. Nhưng việc sử dụng các phương pháp được ưu tiên hơn vì các thứ nguyên là các giá trị được lưu trong bộ nhớ cache, điều này làm giảm cơ hội đọc nhiều DOM và tốn kém.

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

Đây là một ví dụ về dịch vụ mà tôi sử dụng.

Bạn có thể nhận được chiều rộng màn hình bằng cách đăng ký screenWidth$hoặc thông qua screenWidth$.value.

Điều tương tự đối với mediaBreakpoint$(hoặc 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');
    }
  }

}

Hy vọng điều này sẽ giúp ai đó

bạn có thể sử dụng https://github.com/ManuCutillas/ng2-responsive này Hy vọng nó sẽ hữu ích :-)

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

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

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

Câu trả lời rất đơn giản. viết mã dưới đây

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

Bạn có thể sử dụng phương thức typecript getter cho trường hợp này. Như thế này

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

Và sử dụng nó trong mẫu như thế này:

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

Bạn sẽ không cần bất kỳ trình xử lý sự kiện nào để kiểm tra thay đổi kích thước / của cửa sổ, phương pháp này sẽ tự động kiểm tra kích thước mọi lúc.