要获取Angular窗口的高度和宽度,可以使用以下代码示例:
在组件的构造函数中注入Renderer2
服务:
import { Component, Renderer2, ElementRef, OnInit } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor(private renderer: Renderer2, private el: ElementRef) { }
ngOnInit() {
this.getWindowSize();
}
getWindowSize() {
const windowWidth = this.renderer.parentNode(this.el.nativeElement).innerWidth;
const windowHeight = this.renderer.parentNode(this.el.nativeElement).innerHeight;
console.log('Window Width:', windowWidth);
console.log('Window Height:', windowHeight);
}
}
在模板文件 my-component.component.html
中,可以添加一个按钮来调用 getWindowSize
方法:
这样,当点击按钮时,将会在控制台输出窗口的宽度和高度。
请注意,Renderer2
是 Angular 中的一个服务,它提供了一些 DOM 操作的抽象方法,这里使用了它的 parentNode
方法来获取窗口的大小。