我正在寻找一个解决方案,在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();
}
}
有人知道怎么让它工作吗?
2条答案
按热度按时间xqk2d5yq1#
你不能在页面加载之前知道元素的大小。如果不够清楚,如果页面没有加载,那么你的HTML元素就没有加载。
如果你想根据div设置SVG的视图框,你需要等待页面加载,然后改变视图框。这是完全可行的。
最快的方法是:
我将让您处理viewBox属性,因为我并不真正知道您想用它做什么。
顺便说一句,您需要添加
svg:
前缀来告诉angular它不是一个自定义指令。q3qa4bjr2#
如果有人需要其他解决方案: