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

z18hc3ub  于 2022-11-26  发布在  TypeScript
关注(0)|答案(2)|浏览(108)

我正在寻找一个解决方案,在Angular 4中获得DOM元素的宽度,而不采取任何行动(点击或窗口大小调整),就在页面加载后,但在我开始绘制svg之前。我已经在here中发现了类似的情况,但它不适合我。我得到了同样的错误:
错误类型错误:无法读取未定义的属性'nativeElement'
我需要得到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();
  }
}

有人知道怎么让它工作吗?

xqk2d5yq

xqk2d5yq1#

你不能在页面加载之前知道元素的大小。如果不够清楚,如果页面没有加载,那么你的HTML元素就没有加载。
如果你想根据div设置SVG的视图框,你需要等待页面加载,然后改变视图框。这是完全可行的。
最快的方法是:

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

我将让您处理viewBox属性,因为我并不真正知道您想用它做什么。
顺便说一句,您需要添加svg:前缀来告诉angular它不是一个自定义指令。

q3qa4bjr

q3qa4bjr2#

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

<div id="element"></div>
const myElement = document.getElementById('element');

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

相关问题