在Angular 2中获取当前文档大小,可以使用window
对象的innerWidth
和innerHeight
属性来获取浏览器窗口的宽度和高度。以下是一个示例代码:
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.innerWidth
和window.innerHeight
来获取当前文档的宽度和高度,并将其赋值给documentWidth
和documentHeight
属性。在模板中,我们可以直接使用这两个属性来显示当前文档的大小。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。如果你想了解更多关于Angular的知识,可以参考腾讯云的Angular产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云