javascript - getBoundingClientRect() höjd vid första laddning är fel (Angular 16)

Jag har en Angular-direktiv som ger höjd och bredd från getBoundingClientRect() för vilket element direktivet placeras i.

När fönstrets storlek ändras, skriver direktivet ut den nya storleken.

Mitt problem är att vid första inladdningen av en sida, returnerar direktivet en höjd som är enormt för stor (nästan dubbelt så hög). Men efter en ändring av storlek är den returnerade höjden korrekt.

Min direktivkod nedan:

export class ElementSizeObserverDirective implements AfterViewInit, OnInit {
  @Output() spaceSizeChange: EventEmitter<ScreenSize> =
    new EventEmitter<ScreenSize>();

  constructor(
    private elRef: ElementRef,
    private autoUnsubscribeDirective: AutoUnsubscribeDirective
  ) {}

  ngOnInit(): void {
    /* first get the initial screen size after init */
    setTimeout(() => {
      this.getScreenSize();
    });
  }

  ngAfterViewInit(): void {
    /* and then whenever the screen size changes */
    fromEvent(window, 'resize')
      .pipe(
        /* throttleTime(50), */
        takeUntil(this.autoUnsubscribeDirective.destroyNotifier$)
      )
      .subscribe(() => this.getScreenSize());
  }

  private getScreenSize(): void {
    if (!this.elRef) {
      return;
    }

    const reboundClientRec = this.elRef.nativeElement.getBoundingClientRect();
    const {width, height} = reboundClientRec;

    if (width !== undefined && height !== undefined) {
      this.spaceSizeChange.emit({width, height});
    }
  }
}

Vid första sidladdningen är höjden nästan 2 gånger den faktiska höjden. Jag är inte säker på var denna höjd kommer ifrån och hur man åtgärdar det.

Svar #1

När du anropar logiken på ngOnInit är DOM inte initialiserad, flytta istället logiken till ngAfterViewInit som anropas efter att DOM är initialiserad.

  ngAfterViewInit(): void {
    /* and then whenever the screen size changes */
    fromEvent(window, 'resize')
      .pipe(
        /* throttleTime(50), */
        takeUntil(this.autoUnsubscribeDirective.destroyNotifier$)
      )
      .subscribe(() => this.getScreenSize());
      /* first get the initial screen size after init */
      setTimeout(() => {
        this.getScreenSize();
      });
  }

Svar #2

Mitt problem visade sig inte alls vara relaterat till skärmstorleksdirektivet. Utan snarare att ha ett stort antal laddningskort.