Question

我试图从组件中获取宽度，但它是0.我也尝试将代码放在ngOnChanges（）中。

pct_change()

元素风格：

DF['Reverse'] = list(reversed(x_axis))
DF['PCT_rev'] = DF['Reverse'].pct_change()
pct_rev = DF.PCT_rev.tolist()

DF['_PCT_'] = list(reversed(pct_rev))
DF2 = DF[['Y','X','PCT','_PCT_']]

    Y   X   PCT         _PCT_
0   1   100 NaN         -0.047619
1   2   105 0.050000    -0.086957
2   3   115 0.095238    0.210526
3   4   95  -0.173913   0.055556
4   5   90  -0.052632   0.022727
5   6   88  -0.022222   -0.200000
6   7   110 0.250000    0.100000
7   8   100 -0.090909   inf
8   9   0   -1.000000   NaN

我尝试使用clientWidth（）但它也是0。如何以角度2获得元素的宽度？

更新

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

Answer 1

尝试将代码移至AfterViewInit生命周期钩子方法并使用@ViewChild()装饰器，而不是直接在constructor中注入元素。

试试这段代码：

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。同时检查注释以获得解释。

Answer 2

尝试使用：

const rect = this.element.nativeElement.getBoundingClientRect();
const width = rect.width;

Answer 3

您应该将它与elementRef

的元素相关联

@ViewChild('foo') foo: TemplateRef;

<div #foo>
    <h2>Hello {{name}}</h2>
</div>
    {{foo.clientWidth}}

<强> LIVE DEMO

如何获得Angular中绝对定位元素的宽度

3 个答案: