ตรวจจับการเปลี่ยนแปลงขนาดหน้าต่างแบบเรียลไทม์ใน 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แต่ก็ยังไม่ประสบความสำเร็จ

เพื่อรับมันใน init

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

หากคุณต้องการอัปเดตเกี่ยวกับการปรับขนาด:

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

หากคุณต้องการตอบสนองในเบรกพอยต์บางจุด (เช่นทำบางอย่างหากความกว้างน้อยกว่า 768px) คุณยังสามารถใช้ BreakpointObserver:

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

{ ... }

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

หรือแม้แต่ฟังการเปลี่ยนแปลงของเบรกพอยต์นั้น:

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

หากคุณต้องการให้ส่วนประกอบของคุณยังคงทดสอบได้ง่ายคุณควรรวมวัตถุหน้าต่างส่วนกลางไว้ใน 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()และheight()ระบุว่าวิธีการเหล่านี้ใช้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();
    });
}

นี่คือตัวอย่างบริการที่ฉันใช้

คุณจะได้รับความกว้างหน้าจอโดยการสมัครสมาชิกหรือผ่านทาง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() {}

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

}

หวังว่านี่จะช่วยใครบางคนได้

คุณสามารถใช้ 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;
}

คำตอบนั้นง่ายมาก เขียนโค้ดด้านล่าง

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

คุณอาจใช้เมธอด typescript getter สำหรับสถานการณ์นี้ แบบนี้

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

และใช้ในเทมเพลตดังนี้:

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

คุณไม่ต้องใช้ตัวจัดการเหตุการณ์ใด ๆ เพื่อตรวจสอบการปรับขนาด / ของหน้าต่างวิธีนี้จะตรวจสอบขนาดทุกครั้งโดยอัตโนมัติ