如何測量 Angular 中 HTML 元素的元素寬度？

Question

我想動態創建一個元素，然后獲取它的 clientWidth。 使用常規 DOM API 的代碼片段如下所示。

HTML 代碼段：

<div id="non-existent-element"></div>

該元素的 css 屬性可見性設置為“隱藏”。
打字稿/ Javascript 片段

let labelContainer = document.querySelector('div#non-existent-element');
labelContainer.innerHTML = `
<span>${fundName}</span>
<span> (${performance}%)</span>
`;
let children = labelContainer.children as HTMLCollectionOf<HTMLElement>
for(let i = 0; i < children.length; i++) {
  children[i].style.fontSize = fontSize + + 1 +'px';
} 
return labelContainer.clientWidth;

如何使用 Angular 的 Element Ref 和 Renderer2 API 實現目標？

Answer 1

clientWidth 的簡單使用

app.component.html

<p #test>test is the elementRef name</p>

app.component.ts

export class AppComponent implements AfterViewInit {
  @ViewChild('test') test: ElementRef;

  constructor(private renderer: Renderer2) {
    //ERROR TypeError: Cannot read property 'nativeElement' of undefined
    // console.log(this.test.nativeElement.clientWidth);
  }

  ngOnInit() {
    //logs: 583
    console.log(this.test.nativeElement.clientWidth);
  }

  ngAfterViewInit() {
    this.renderer.setStyle(this.test.nativeElement, 'backgroundColor', 'red');
    this.renderer.setStyle(this.test.nativeElement, 'color', 'white');
    this.renderer.setStyle(this.test.nativeElement, 'width', '500px');

    //logs: 500
    console.log(this.test.nativeElement.clientWidth);
  }
}