如果在Angular应用程序中无法获取任何元素的getBoundingClientRect()
,可能是因为尝试在元素被渲染之前进行访问。以下是一些可能的解决方法。
ngAfterViewInit
生命周期钩子:
在组件的ngAfterViewInit
生命周期钩子中,确保元素已经被渲染并可以获取到。示例代码如下:import { Component, AfterViewInit, ElementRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: ``
})
export class MyComponent implements AfterViewInit {
@ViewChild('myElement', {static: false}) myElement: ElementRef;
ngAfterViewInit() {
const elementRect = this.myElement.nativeElement.getBoundingClientRect();
console.log(elementRect);
}
}
Renderer2
:
使用Angular的Renderer2
可以确保在元素被渲染之后再进行操作。示例代码如下:import { Component, AfterViewInit, Renderer2, ElementRef } from '@angular/core';
@Component({
selector: 'app-my-component',
template: ``
})
export class MyComponent implements AfterViewInit {
@ViewChild('myElement', {static: false}) myElement: ElementRef;
constructor(private renderer: Renderer2) {}
ngAfterViewInit() {
this.renderer.listen('window', 'load', () => {
const elementRect = this.myElement.nativeElement.getBoundingClientRect();
console.log(elementRect);
});
}
}
通过使用这些解决方案,您应该能够在Angular应用程序中获取元素的getBoundingClientRect()
。
上一篇:Angular 应用程序在 Apache 服务器上找不到后端。
下一篇:Angular 应用导致 JavaScript 中的 "import-from" 出现了"Uncaught SyntaxError: Unexpected identifier" 的错误。