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

Question

我正在寻找 Angular 4 中的解决方案来获取 DOM 元素的宽度，而无需执行任何操作（单击或调整窗口大小），就在页面加载之后，但在我开始绘制 svg 之前。我在here 中发现了一个类似的案例，但它对我不起作用。我得到同样的错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined

我需要获取 div 容器的宽度来设置我在其中绘制的 svg 的 veiwbox。

这是模板：

<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();
  }
}

有人知道如何让它工作吗？

Answer 1

在页面加载之前，您不能拥有元素的大小。如果还不够清楚，如果页面没有加载，那么你的 HTML 元素就没有加载。

如果你想根据一个div来设置你的SVG的viewbox，你需要等待页面加载，然后改变viewbox。这是完全可行的。

最快的方法是：

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

我会让你处理 viewBox 属性，因为我真的不知道你想用它做什么。

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