Question

我有一个可滚动内容的组件。然而，当我尝试使用ViewChild获取可滚动内容的维度时，我得到所有值的零，但是如果我使用jQuery来获取元素，我会得到正确的值。为什么会这样？我应该如何在Angular中获得正确的尺寸？我验证两者都有相同的元素，但我相信角度没有正确的值或元素也许？在控制台中查看jQuery和Angular似乎都有相同的元素来判断css类和html名称。

模板：

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

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

控制器代码：

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 
  }

请帮帮忙？

Answer 1

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

你提供了整个代码吗？它是一个路由组件吗？任何信息都会有用。

angular5 ViewChild clientHeight，scrollTop，scrollHeight都是零之后

1 个答案: