首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular2中获取当前文档大小

在Angular 2中获取当前文档大小,可以使用window对象的innerWidthinnerHeight属性来获取浏览器窗口的宽度和高度。以下是一个示例代码:

代码语言:typescript
复制
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>当前文档大小:{{ documentWidth }} x {{ documentHeight }}</p>
  `,
})
export class AppComponent {
  documentWidth: number;
  documentHeight: number;

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

  constructor() {
    this.documentWidth = window.innerWidth;
    this.documentHeight = window.innerHeight;
  }
}

在上述代码中,我们使用了HostListener装饰器来监听窗口大小改变的事件。当窗口大小改变时,onResize方法会被调用,然后我们通过window.innerWidthwindow.innerHeight来获取当前文档的宽度和高度,并将其赋值给documentWidthdocumentHeight属性。在模板中,我们可以直接使用这两个属性来显示当前文档的大小。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。如果你想了解更多关于Angular的知识,可以参考腾讯云的Angular产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券