javascript - Angular 5 ViewChild clientHeight，scrollTop，scrollHeight在之后均为零

我有一个具有可滚动内容的组件。
但是，当我尝试使用ViewChild获取 Angular 可滚动内容的尺寸时，所有值都为零，但是如果我使用jQuery来抓取元素，则会得到正确的值。为什么会这样呢？如何在Angular中获得正确的尺寸？我验证了两者具有相同的元素，但我相信angular可能没有正确的值或元素吗？从控制台中看，根据css类和html名称判断，jQuery和Angular似乎都具有相同的元素。

模板:

<div class="container-fluid px-5 py-5 scrolled-contents" style="display:inline-block" #scrolledContents>

  <div class="row">
  ...content
  </div>
</div>

Controller 代码:

export class ScrollContainer implements OnInit {

  @ViewChild('scrolledContents') private scrollContainer: ElementRef;

  @HostListener("window:scroll", [])
  onScroll(): void {
    const jQueryelement = $(".scrolled-contents")[0];
    const angularElement = this.scrollContainer.nativeElement;
    // angularElement.clientHeight == 0, angularElement.offsetHeight == 0, angularElement.scrollTop == 0, etc
    // jQueryElement.clientHeight == correctValue, jQueryElement.offsetHeight == correct value, jQueryElement.scrollTop == correctValue
  }

请帮忙 ？

最佳答案

Here is a working StackBlitz，我似乎无法重现您的问题。

您是否提供了完整的代码？它是路由组件吗？任何信息都是有用的。