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

【问题标题】：How to get height and width of device display in angular2 using typescript?如何使用打字稿在angular2中获取设备显示的高度和宽度？
【发布时间】：2017-02-14 18:32:05
【问题描述】：

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

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

请给我建议正确的方法。

【问题讨论】：

回答你的问题，不。这在 Angular 2 中不是有效的方式，因为 Ionic 不是 Angular 的一部分，反之亦然。您仍然可以使用“窗口”获取客户端的高度/宽度
@JoeriShoeby:- 是的，现在我正在尝试宽度：window.innerWidth，高度：window.innerHeight 但我收到错误消息。 [ts] 找不到命名空间“窗口”。
这是因为您的 Typescript 编译器不知道“窗口”。您可能需要安装类型以确保您的编译器能够识别它。
@JoeriShoeby：- 对。但是如何安装呢？
您是否已经安装了任何类型？如果没有，首先使用 'sudo npm install -g typings' 安装类型

标签： angular typescript

【解决方案1】：

对于这种情况，您可以使用 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);

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

【讨论】：

【解决方案2】：

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

【讨论】：

没有定义窗口？

【解决方案3】：

对于那些想要获得设备高度和宽度的用户，即使显示屏调整大小（动态和实时）：

第一步：

在该组件中执行：import { HostListener } from "@angular/core";

第二步：

在组件的类体中写：

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

第三步：

在组件的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);
    }

}

【讨论】：

最小高度（min-height）怎么样？
屏幕高度：任意；屏幕宽度：任意；它们是数字；）
这个解释帮助很大。我还能够通过在 HostListener 宽度更改事件中测试宽度断点来切换展开/折叠。完美！
@BlackBeard：为什么事件后函数定义中有问号？即 getScreenSize(event?) 。我对此一无所知。这是一种习惯吗？
@omkar Angular2+ 使用 Typescript；在 Typescript 中，可以在方法签名中使用问号 (?) 来标记可选参数。在此示例中，HostListener 将提供事件（我想它只是为了完整性而提供 - 在此示例中您不需要转发）并且来自构造函数的初始调用不会提供事件。如果您在需要时忽略标记可选性，IDE 中的 typescript 编译器或者 ng-build 稍后可能会引发有关签名差异的警告/错误。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

请记住，如果您想测试此组件，您将需要注入窗口。使用@Inject() 函数通过使用字符串标记命名窗口对象来注入窗口对象，如duplicate中详述的@

【讨论】：