如何在Angular 4中获取页面加载后(DOM)元素的宽度

Question

我正在寻找Angular 4的解决方案，在不执行任何操作（单击或窗口调整大小）的情况下，获取DOM元素的宽度，仅在页面加载后但在开始绘制SVG之前。 我在这里找到了一个类似的案例，但对我没用。 我得到了同样的错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined

我需要获取div容器的宽度，以设置SVG的viewbox。

这是模板：

<div id="what-is-the-width" class="svg-chart-container">
    <svg [innerHTML]="svg"></svg>
</div>

带有在此情况下所需内容的 TS 文件：

import { Component, Input, OnInit, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class SvgChartComponent implements OnInit {

  @ViewChild('what-is-the-width') elementView: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    console.log(this.elementView.nativeElement);
  }

  ngOnInit() {
    //this method gets the data from the server and draw the svg
    this.getSVGChartData();
  }
}

有人有想法如何让这个工作吗？

- mpro

---

似乎在引用名称中不允许使用“-”，出现了“未捕获错误：模板解析错误”。 - mpro

Answer 1

在页面加载之前，您无法获取元素的大小。如果不够清楚，如果页面没有加载，则您的HTML元素也没有加载。

如果您想根据div设置SVG的视口框，则需要等待页面加载，然后更改视口框。这是完全可行的。

最快的方法是：

<div #container>Container's width is {{ container.offsetWidth }}</div>
<svg:svg [width]="container.offsetWidth"></svg>

我会让你处理 viewBox 属性，因为我不太清楚你想要做什么。

顺便说一下，你需要添加 svg: 前缀来告诉 Angular 它不是自定义指令。

- user4676340

---

太简单了！ :) 谢谢，它有效！我会编辑标题和问题，因为真的不清楚。当然，在页面加载后但在我调用绘制SVG方法之前获取宽度。 - mpro

没问题！记得将你的问题标记为已解决！ - user4676340

声明是@ViewChild('container') container : ElementRef;。要获取值，可以使用this.container.nativeElement.offsetWidth。对于您的IDE，可以使用(this.container.nativeElement as HTMLElement).offsetWidth。 - user4676340

哦，你需要在生命周期钩子的初始化步骤之后使用nativeElement。这意味着不是在构造函数中，而是至少在ngOnInit中！ - user4676340

如果你遇到“无法绑定到 'width'，因为它不是 ':svg:svg' 的已知属性”，请使用：<svg:svg [attr.width]="container.offsetWidth"></svg:svg>。 - J. Pinxten

Answer 2

如果有人需要其他解决方案：

<div id="element"></div>

const myElement = document.getElementById('element');

if(myElement){
  myElement.getBoundingClientRect().width; // Get the width of the your element
}

- Dylan Moguilevsky