javascript - 加载页面后如何在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 这不是自定义指令。