使用 Angular 获取屏幕的宽度和高度

2024 年 8 月 29 日 | 阅读 2 分钟

在本节中，我们将学习如何获取屏幕的高度和宽度。我们将使用 Angular 来完成此操作。如果我们不了解屏幕高度，我们可以使用以下示例，因为这些示例提供了有关屏幕高度和重量的详细知识。在下面的应用程序中，我们将实现一个获取屏幕宽度和高度的功能。为了获得窗口的高度和宽度，我们可以使用各种版本的 Angular 应用程序，例如 Angular 6、7、8、9、10 和 11。

在我们的 Angular 应用程序中，我们将在调整大小事件时获取窗口的大小。在这里，我们将解释两个获取窗口大小的示例。在我们的第一个示例中，我们将简单地获取窗口大小，在第二个示例中，我们将获取调整大小时的窗口大小。为了获得窗口的高度和宽度，步骤如下

示例 1

在第一个示例中，我们将获取窗口的宽度和高度。

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
     <p>Screen width: {{ screenWidth }}</p>
     <p>Screen height: {{ screenHeight }}</p>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  
  public screenWidth: any;
  public screenHeight: any;
  
  ngOnInit() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
  }
}

现在我们的示例 1 已经准备好运行。当我们运行这个例子时，会生成以下输出

Screen width: 1374
  
Screen height: 589

示例 2

在我们的第二个示例中，我们将在调整大小时获取窗口大小。

import { Component, OnInit, HostListener } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
     <p>Screen width: {{ screenWidth }}</p>
     <p>Screen height: {{ screenHeight }}</p>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  
  public screenWidth: any;
  public screenHeight: any;
  
  ngOnInit() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
  }
  
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;
  }
   
}

现在我们的示例 2 已经准备好运行。当我们运行这个例子时，会生成以下输出

Screen width: 878
  
Screen height: 685

下一个主题使用 Angular 9/8 SEO 添加页面标题和元标记

← 上一个下一个 →

使用 Angular 获取屏幕的宽度和高度

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

使用 Angular 获取屏幕的宽度和高度

相关帖子

Angular 表单验证不允许空格

Angular 6 中的函数

设置 Angular 组件的样式

Angular 延迟加载

Angular 拖放

Angular 样式绑定

Angular 9 创建带有路由的模块

如何在 Angular 中添加事件监听器？

AngularJS API

Angular 卡片

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器