页面加载时动态高度计算不正确，但在视口调整大小后正确计算

Question

我有一个与组合一起使用的 Angular 组件，这意味着组件的标题会根据输入动态更改。我遇到的问题是，当页面加载时，计算组件的高度就好像标题只有一行一样，使组件看起来比应有的要小。但是，一旦我调整窗口大小，高度就会正确重新计算。

我已经尝试过：

在 ngAfterContentInit 和 ngAfterViewChecked 中调用 ChangeDetectorRef.detectChanges()。 使用 requestAnimationFrame 来延迟高度计算。 使用@HostListener监听窗口的调整大小事件。

    export class ContentComponent implements AfterContentInit, AfterViewChecked, OnDestroy {

      @ViewChildren('header') headers?: QueryList<ElementRef>;

      private subscriptions = new Subscription();

      constructor(
        private cdRef: ChangeDetectorRef,
        private router: Router,
       ) {
            this.subscriptions.add(
          this.router.events
            .pipe(
              filter((event: Event) => event instanceof NavigationEnd),
          tap(() => this.adjustHeights()),
        )
        .subscribe(),
    );
  }

  ngAfterContentInit(): void {
    this.cdRef.detectChanges();
    this.adjustHeights();
  }

  ngAfterViewChecked(): void {
    if (!this.viewChecked) {
      this.adjustHeights();
      this.viewChecked = true;
    }
  }

      ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  private adjustHeights(): void {
    const maxHeight = Math.max(...(this.headers?.map((e) => e.nativeElement.scrollHeight) || [0]));
    document.documentElement.style.setProperty('--max-header-height', `${maxHeight}px`);
  }
  @HostListener('window:resize')
      onResize(): void {
        this.adjustHeights();
      }
    }
    `

html

 <div>
    <div class="header" #header>
      <div class="header-title">
        <h3>{{ title }}</h3>
      </div>
    </div>
 </div>

我认为可能会发生什么：当我计算页面加载的高度时，布局似乎尚未完全确定，但调整视口大小会强制正确设置高度的回流。

我的问题：如何确保组件在初始加载时计算正确的高度，而不需要调整视口大小？

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

尝试

ngAfterViewInit

，它会在视图完全初始化后触发。

为了安全起见，我添加了

setTimeout

时间

500ms

，如果不需要，可以将其删除。

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.adjustHeights();
      this.viewChecked = true;
    }, 500);
  }