javascript - 如何在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);
  }
}