javascript - 如何在 Angular 中获取绝对定位元素的宽度

Question

我正在尝试获取组件的宽度，但它是 0。我还尝试将代码放在 ngOnChanges() 中。

constructor(private element: ElementRef) {
  this.htmlElement = this.element.nativeElement;
  let width = this.htmlElement.offsetWidth;
}

元素样式:

display: block;
position: absolute;
left: 100;

我尝试使用 clientWidth() 但它也是 0。如何获得 Angular 为 2 的元素的宽度？

更新:

我没有使用绝对定位并且宽度是正确的，所以我想问题是如何获得绝对定位元素的宽度？

Answer 1

尝试将您的代码移动到AfterViewInit 生命周期 Hook 方法并使用@ViewChild()装饰器而不是直接在 constructor 中注入(inject)元素。

试试这段代码:

import {Component, ElementRef, ViewChild, HTMLElement, AfterViewInit} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div #child>
      <h2>Hello!</h2>
    </div>
  `,
})
export class App implements AfterViewInit {
  @ViewChild('child') element: any;
  htmlElement: HTMLElement;

  constructor() {}

  ngAfterViewInit() {
    this.htmlElement = this.element.nativeElement;
    let width = this.element.nativeElement.offsetWidth;
  }
}

或参见the working example here .另请查看评论以获取解释。