如何测量 Angular 中 HTML 元素的元素宽度？

Question

我想动态创建一个元素，然后获取它的clientWidth。使用常规 DOM API.

的代码片段看起来像这样

HTML 片段：

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

该元素的 css 属性可见性设置为 'hidden'。
打字稿/ 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

Simple usage of 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);
  }
}

如何测量 Angular 中 HTML 元素的元素宽度？

How to measure element width of an HTML element in Angular?

javascript

dom-manipulation

angular

elementref

angular-renderer2