如何使用打字稿在angular2中获得设备显示的高度和宽度？

Question

我找到了这个解决方案 有效吗？

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吗？

请建议我正确的方法.

Answer 1

对于那些想要获得设备高度和宽度的人,即使显示器已调整大小(动态和实时):

• 步骤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);
    }

}

Answer 2

我找到了解决方案.答案很简单.在构造函数中编写以下代码.

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

Answer 3

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

Answer 4

您可以在这种情况下使用 typescript getter 方法。像这样

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

您不需要任何事件处理程序来检查窗口的大小调整，此方法每次都会自动检查大小。

Answer 5

请记住,如果您想测试此组件,则需要注入窗口.使用@Inject()函数通过使用字符串标记命名它来注入窗口对象,如此副本中详细说明的那样