Angular 应用程序，无法获取任何元素的 getBoundingClientRect

Question

我有一个 Angular 项目已完成一半的开发，我正在 Angular 15 上使用带有 Universal 的 SSR（提及以防万一它很重要，尽管它不在开发模式下运行）、bootstap 和 ng-bootstrap。我注意到一些奇怪的行为ng-bootstrap 下拉菜单没有正确定位，但我认为这很简单，但现在我注意到，每当我尝试获取任何元素的 getBoundingClientRect 时，它总是返回为 0（顶部、左侧、底部、右侧）。

我真的不知道还能说什么，这很令人困惑。还有其他人遇到过这个问题吗？

  import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';

  @Component({
    selector: 'app-xxx',
    templateUrl: './xxx.component.html',
    styleUrls: ['./xxx.component.scss']
  })
  export class XXXComponent implements OnDestroy, OnInit, AfterViewInit {

    @ViewChild('demoE', { static: false }) demoE!: ElementRef;
    
    constructor( ) {}
    
    ngAfterViewInit(): void {
      setTimeout(() => {
        const element: HTMLElement = this.demoE.nativeElement;
        const rect = element.getBoundingClientRect();
        alert(JSON.stringify(rect))
        const distanceFromTop = rect.top;
        const distanceFromLeft = rect.left;
        console.log('Distance from top:', distanceFromTop);
        console.log('Distance from left:', distanceFromLeft);      
      }, 2000);

    }
      
  }

我将此 html 埋在页面底部，因此它应该返回一些边界，我也在多个其他组件中尝试过，但根本无法获取任何内容的边界

  <div #demoE class="row">
  <div class="col-12">
    Helo
  </div>
</div>  

当我

alert(JSON.stringify(rect))

我得到以下值`{“ngContext”：13}