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

Posted 2023-03-05

【中文标题】如何使用打字稿在angular2中获取设备显示的高度和宽度？

【英文标题】：How to get height and width of device display in angular2 using typescript?

【发布时间】：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' 安装类型

【参考方案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中详述的@