typescript - Angular viewChild hämta offsetbredd

Angula 11 // OBSA DETTA HÄNDER MED ALLA OFFSETTAR MEN ATT HÄMTA ID PER EXEMPEL FUNGERAR

Så vi har några @Viewchilds av ElementRefs som vi vill få offsetWidth för.

För att göra det har vi följande kod:

// container is the REF that has the HTML --> #container
@ViewChild('container') containerRef: ElementRef;
...
...
ngAfterViewInit(): void {
const containerOffset: number = this.containerRef.nativeElement.offsetWidth;
const containerOffset1: number = (this.containerRef.nativeElement as HTMLElement).offsetWidth;
}

Problemet är att de förskjutningar vi får är 0.

Men om vi gör en console.log(this.containerRef) visar det perfekt nativeElement inuti och du kan se att offseten är annorlunda än 0.

Kan någon hjälpa till här, tack?

( Om möjligt en lösning utan att använda document.querySelector.....)

Svar #1

Så här fick jag bredden på ett föräldraelementets visningsbarn för min situation. Jag kunde testa detta framgångsrikt med både "OnInit" och "AfterViewInit".

/** Left Column */
@ViewChild('gridLeftColumn', { static: true })
public gridLeftColumn: ElementRef;

const columnWidth: number = (this.gridLeftColumn.nativeElement as HTMLElement).clientWidth;

console.log('Column Width: ', columnWidth); // 760

Svar #2

ngAfterViewInit() {
      console.log(this.el.nativeElement.clientWidth); //return 0
  }


ngAfterViewInit() {
    setTimeout(() => {
      console.log(this.el.nativeElement.clientWidth); // return 84 (true)
    }, 100);
  }

Jag har en 'Direktiv' och jag hittade en lösning för 'Direktiv'. Lägg bara till en liten timeout. Ha en trevlig dag!