কৌণিক 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একটি আয়নিক পরিষেবা। সুতরাং আমি অনুমান করছি এটি একটি আয়নিক প্রকল্প?

— রোবান

টাইপস্ক্রিপ্ট ব্যবহার করে কৌণিক

— ব্ল্যাকবিয়ার্ড

@ ব্ল্যাকবিয়ার্ড 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 = ইভেন্ট.target.innerWidth; ... সম্ভবত আরও দক্ষ, একই ফলাফল উত্পাদন করে

— danday74

এছাড়াও আপনি লড্যাশ ব্যবহার করছেন যদি এটি কনস্ট্রাক্টরে সুপারিশ করুন ... এটি.অনরাইজ = ডিবাউন (এটি.অনরাইজ, 150, {নেতৃস্থানীয়: ভুয়া, ট্রেইলিং: সত্য}) ... অনারাইজ পদ্ধতিটি খুব ঘন ঘন ডাকা রোধ করতে .. ... আপনার প্রয়োজন হবে ... 'লোডাশ' থেকে import আত্মপ্রকাশ import আমদানি করুন

— danday74

আমি ব্যবহার পছন্দ মনে ngAfterViewInitপরিবর্তে জীবন হুক পদ্ধতি ngOnInit জীবন হুক পদ্ধতি

— আহমেদ হামদি

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)এটি সাবস্ক্রাইব করুন অন্যথায় এটি কল করবে এমনকি যদি তা না

— ঘটে

@ কারোলুস: হ্যাঁ অবশ্যই আমি আমার উত্তরটি সম্পাদন করেছিলাম তা পরিষ্কার করার জন্য। ধন্যবাদ.

— জেরেমি বেনস 14'19

দেখে মনে হচ্ছে এটিতে কৌণিকের cdkনির্দিষ্ট সংস্করণে পিয়ার নির্ভরতা রয়েছে। সর্বশেষ জন্য 7 পছন্দ করুন। যাইহোক আমি পুরানো সংস্করণ (প্রশ্ন হিসাবে কৌনিক 4) এর জন্য এটি ব্যবহার করতে পারি?

— লিওন - হান লি

@ লিওন লি: আমি আসলে কৌণিক 7 ব্যবহার করি, এটি ঠিক। তবে: আমি যতদূর জানি আপনি কৌনিক 4 তেও সিডিকে ব্যবহার করতে পারেন। মতে এই ব্লগে আপনি 2.x. cdk দরকার যতদূর আমি জানি, এটি ম্যানুয়ালি ইনস্টল করতে হবে এবং এটির মতো নির্দিষ্ট সংস্করণটি ইনস্টল করতে হবে: এনএমপি @ কৌণিক / সিডিকে @ 4

— জেরেমি বেন্কস

@ জেরেমিবেঙ্কস ওয়াই, আমরা 4.2.6বিশেষত এনজি ব্যবহার করছি । এটিতে একটি সিডিকে ২.x ভেরিওনস খুঁজে পাওয়া যায় না, কেবল ৪.১.x এবং ৪.৩.x. যাইহোক ধন্যবাদ!

— লিওন - হান লি

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।

— রডরিগো

প্রথমত ডিআই হ'ল কৌণিক উপায় এবং একটি উপাদান / নির্দেশিকা পরিষ্কারের নির্ভরতা তৈরি করে। তবে এখানে উল্লিখিত মূল পয়েন্টটি কোডটি তৈরি করা হয়েছে যা পরিষেবাটি পরীক্ষার জন্য আরও সহজ করে তোলে। এই পদ্ধতির ব্যবহার করে পরিষেবাটি ব্যবহারকারী উপাদানগুলির জন্য লিখিত যে কোনও পরীক্ষায় উইন্ডোসেসওয়ারকে উপহাস করা যায়।

— Kildareflare

Answer 4

এর ডকুমেন্টেশন 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();
    });
}

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

আমার প্রিয় উত্তর! এটির কাজ করার জন্য আপনি কনস্ট্রাক্টারে এই.in.init () যুক্ত করেছেন তা নিশ্চিত করুন।

— বেন

Answer 6

আপনি এই https://github.com/ManuCutillas/ng2- প্রতিক্রিয়াশীল ব্যবহার করতে পারেন আশা করি এটি সাহায্য করে :-)

Answer 7

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

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

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

Comments

কেন এটি সঠিক সমাধান হতে পারে সর্বদা ব্যাখ্যা করুন

— ডিসি

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

আপনি এই দৃশ্যের জন্য টাইপ স্ক্রিপ্ট getter পদ্ধতি ব্যবহার করতে পারেন। এটার মত

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

এবং এটি টেমপ্লেটে এটি ব্যবহার করুন:

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

আপনার উইন্ডোর আকার পরিবর্তন / পরীক্ষা করার জন্য কোনও ইভেন্ট হ্যান্ডলারের প্রয়োজন হবে না, এই পদ্ধতিটি প্রতিবার স্বয়ংক্রিয়ভাবে আকারের জন্য চেক করবে।