타자 스크립트를 사용하여 각도 2에서 장치 디스플레이의 높이와 너비를 얻는 방법은 무엇입니까?

타자 스크립트를 사용하여 각도 2에서 장치 디스플레이의 높이와 너비를 얻는 방법은 무엇입니까?

저는 이 해결책을 찾았습니다.유효합니까?

import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';

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

이 용액은 이온 2용입니다. 각도 2에도 사용할 수 있습니까?

그것을 하는 올바른 방법을 제게시해 주세요.

디스플레이 크기를 동적으로 실시간으로 조정할 때에도 장치의 높이와 너비를 확인하려는 사용자:

• 1단계:

해당 구성 요소에서 다음 작업을 수행합니다.import { HostListener } from "@angular/core";

• 2단계:

구성 요소의 클래스 본문에 다음과 같이 기록합니다.

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

• 3단계:

구성 요소의 구성 요소의constructor을 부르다onResize변수를 초기화하는 방법입니다.또한, 먼저 신고하는 것을 잊지 마세요.

constructor() {
  this.onResize();
}    

전체 코드:

import { Component, OnInit } from "@angular/core";
import { HostListener } from "@angular/core";

@Component({
  selector: "app-login",
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class FooComponent implements OnInit {
    screenHeight: number;
    screenWidth: number;

    constructor() {
        this.getScreenSize();
    }

    @HostListener('window:resize', ['$event'])
    getScreenSize(event?) {
          this.screenHeight = window.innerHeight;
          this.screenWidth = window.innerWidth;
          console.log(this.screenHeight, this.screenWidth);
    }

}

해결책을 찾았어요답은 매우 간단합니다. 아래 코드를 당신의 생성자에 쓰세요.

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


}

작업 코드(다른) ======

export class Dashboard  {
 mobHeight: any;
 mobWidth: any;
     constructor(private router:Router, private http: Http){
        this.mobHeight = (window.screen.height) + "px";
        this.mobWidth = (window.screen.width) + "px";
          console.log(this.mobHeight);
          console.log(this.mobWidth)
     }
}

export class Dashboard {
    innerHeight: any;
    innerWidth: any;
    constructor() {
        this.innerHeight = (window.screen.height) + "px";
        this.innerWidth = (window.screen.width) + "px";
    }
}

이 시나리오에서는 유형 스크립트 게터 방법을 사용할 수 있습니다.이것처럼.

public get height() {
  return window.innerHeight;
}

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

그리고 이를 다음과 같은 템플릿에서 사용합니다.

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

값 인쇄

console.log(this.height, this.width);

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

이 구성 요소를 테스트하려면 창을 주입해야 합니다.@Inject() 함수를 사용하여 이 복제에 자세히 설명된 것처럼 문자열 토큰을 사용하여 창 개체의 이름을 지정하여 창 개체를 주입합니다.

저는 당신이 주사를 놓는 것이 추천된다는 것을 읽었습니다.DOCUMENT생성자에서 브라우저와 서버 측 렌더링 플랫폼 모두에서 작동합니다.다음에 대한 글로벌 DOM 참조window브라우저 렌더링 플랫폼에서만 작동합니다.사용할 수 있는 미망인 개체에 액세스하려면 다음과 같이 하십시오.DOCUMENT:

@Inject(DOCUMENT) private _document: Document

console.log('window height ', this._document.defaultview.innerHeight);
console.log('window height ', this._document.defaultview.innerWidth);

언급URL : https://stackoverflow.com/questions/39888768/how-to-get-height-and-width-of-device-display-in-angular2-using-typescript