कोणीय 4 में वास्तविक समय खिड़की के आकार का पता लगाना

Question

मैं एक उत्तरदायी नौसेना-बार बनाने की कोशिश कर रहा हूं और मीडिया क्वेरी का उपयोग करने की इच्छा नहीं करता हूं, इसलिए मैं *ngIFएक मापदंड के रूप में खिड़की के आकार के साथ उपयोग करने का इरादा रखता हूं । लेकिन मुझे एक समस्या का सामना करना पड़ रहा है क्योंकि मैं कोणीय 4 खिड़की के आकार का पता लगाने के लिए किसी भी तरीके या दस्तावेज को खोजने में असमर्थ हूं। मैंने जावास्क्रिप्ट विधि की भी कोशिश की है, लेकिन यह समर्थित नहीं है।

मैंने निम्नलिखित कोशिश भी की है :

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

... जिसका उपयोग आयनिक में किया जाता था।

और screen.availHeight, लेकिन फिर भी कोई सफलता नहीं मिली।

Comments

किस platformबारे में है? क्या यह आयनिक है?

— गुंटर ज़ोचबॉयर

@ गुंटर ज़ोचबॉयर प्लेटफ़ॉर्म कोणीय है, बस उन कोड का उल्लेख करना चाहता था जो मैंने कोशिश की थी।

— रोनित ओमन

Platformएक आयोनिक सेवा है। तो मुझे लगता है कि यह एक ईओण परियोजना है?

— लुटेरेन

के संभावित डुप्लिकेट कैसे angular2 टाइपप्रति का उपयोग करने में ऊंचाई डिवाइस प्रदर्शन की चौड़ाई प्राप्त करने के लिए?

— ब्लैकबर्ड सेप

@ बेलबैक मुझे नहीं लगता कि यह कोणीय 2 और 4 के अंतर के कारण एक डुप्लिकेट है।

— तहलवी

Answer 1

Init पर पाने के लिए

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

यदि आप इसे आकार परिवर्तन पर अद्यतन रखना चाहते हैं:

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

Comments

this.innerWidth = event.target.innerWidth; ... संभवतः अधिक कुशल है, उसी परिणाम का उत्पादन करता है

— danday74

कंस्ट्रक्टर में भी इसकी सलाह दें यदि आप लॉश का उपयोग कर रहे हैं ... this.onResize = debounce (this.onResize, 150, {अग्रणी: असत्य, अनुगामी: सत्य}) ... onResize विधि को रोकने के लिए बहुत बार कहा जा रहा है। आपको 'लॉश' से आयात ... पराजय की आवश्यकता होगी

— danday74

मैं का उपयोग करने के लिए पसंद लगता है ngAfterViewInitके बजाय जीवन हुक विधि ngOnInit जीवन हुक विधि

— अहमद hamdy

Answer 2

यदि आप कुछ ब्रेकपॉइंट पर प्रतिक्रिया करना चाहते हैं (जैसे कि चौड़ाई 768px से कम है तो कुछ करें), आप ब्रेकपॉइंटऑपरेशन का उपयोग भी कर सकते हैं:

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

Comments

यदि आप केवल तभी कार्य करना चाहते हैं, जब पर्यवेक्षक ने आपको जो मानदंड if (result.matches)

— मिलाया है

@karoluS: हाँ बिल्कुल। मैंने अपना उत्तर उस स्पष्ट करने के लिए संपादित किया। धन्यवाद।

— जेरेमी बेन्स

लगता है कि यह cdkकोणीय के विशिष्ट संस्करण पर सहकर्मी निर्भरता है। नवीनतम के लिए 7 की तरह। वैसे भी मैं पुराने संस्करण (प्रश्न के रूप में कोणीय 4) के लिए इसका उपयोग कर सकता हूं?

— लियोन - हान ली

@ लियोन ली: मैं वास्तव में कोणीय 7 का उपयोग करता हूं, यह सही है। हालाँकि: जहाँ तक मुझे पता है कि आप कोणीय 4 में भी cdk का उपयोग कर सकते हैं। इस ब्लॉग पोस्ट के अनुसार आपको cdk 2.x चाहिए। जहां तक ​​मुझे पता है, इसे मैन्युअल रूप से इंस्टॉल किया जाना है और इस तरह के संस्करण के साथ निर्दिष्ट करना होगा: npm @ angular / cdk @ 4

— जेरेमी बैंक्स

@JeremyBenks Y, हम 4.2.6विशेष रूप से एनजी का उपयोग कर रहे हैं । केवल 4.1.x और 4.3.x पर उस पर एक cdk 2.x verison नहीं ढूँढ सकते। कोई बात नहीं धन्यवाद!

— LeOn - हान ली

Answer 3

यदि आप चाहते हैं कि आपके घटक आसानी से परीक्षण योग्य रहें तो आपको वैश्विक विंडो ऑब्जेक्ट को कोणीय सेवा में लपेटना चाहिए:

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

फिर आप इसे किसी अन्य सेवा की तरह इंजेक्ट कर सकते हैं:

constructor(
    private windowService: WindowService
) { }

और उपभोग करें ...

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

Comments

मैं उस सेवा को करने के लिए बिंदु नहीं देख सकता जो वास्तव में पहले से ही है। window.innerWidth।

— रॉड्रिगो

सबसे पहले DI कोणीय तरीका है और एक घटक / निर्देशक को स्पष्ट करने की निर्भरता बनाता है। लेकिन यहां उल्लिखित मुख्य बिंदु उस कोड को बनाना है जो परीक्षण के लिए सेवा का आसान उपयोग करता है। इस दृष्टिकोण का उपयोग करके सेवा का उपयोग करने वाले घटकों के लिए लिखे गए किसी भी परीक्षण में WindowService का मजाक उड़ाया जा सकता है।

— Kildareflare

Answer 4

के लिए प्रलेखन Platform width()और height(), यह कहा गया है कि इन विधियों का उपयोग करें window.innerWidthऔर window.innerHeightक्रमशः। लेकिन तरीकों का उपयोग करना पसंद किया जाता है क्योंकि आयाम कैश किए गए मान हैं, जो कई और महंगी डोम रीड की संभावना को कम करता है।

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

Comments

कैसे हो रही है widthकी windowसे संबंधित हैं DOM? तार्किक रूप से, यह इस बात पर निर्भर नहीं होना चाहिए कि डोम पेड़ कैसा दिखता है।

— शायरीर सलझोई

Answer 5

यह सेवा का एक उदाहरण है जिसका मैं उपयोग करता हूं।

आप स्क्रीन की चौड़ाई को सब्सक्राइब करके 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');
    }
  }

}

आशा है कि यह किसी की मदद करता है

Comments

मेरा पसंदीदा जवाब! काम करने के लिए बस यह सुनिश्चित करें कि आप कन्स्ट्रक्टर में इस.init () को जोड़ दें।

— बेन

Answer 6

आप इसका उपयोग कर सकते हैं https://github.com/ManuCutillas/ng2-responsive आशा है कि यह मदद करता है :-)

Answer 7

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

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

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

Comments

हमेशा समझाएं कि यह सही समाधान क्यों हो सकता है

— thedp

Answer 8

जवाब बहुत आसान है। नीचे दिए गए कोड को लिखें

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

Answer 9

आप इस परिदृश्य के लिए टाइपस्क्रिप्ट पानेवाला विधि का उपयोग कर सकते हैं। ऐशे ही

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

और इस तरह से टेम्पलेट में उपयोग करें:

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

विंडो के आकार बदलने / जांचने के लिए आपको किसी ईवेंट हैंडलर की आवश्यकता नहीं होगी, यह विधि हर बार स्वचालित रूप से आकार की जांच करेगी।