本机元素的大小为零

时间:2019-02-05 01:21:31

标签: javascript angular typescript ionic-framework leaflet

在代码中,我使用ViewChild引用了我的DOM元素。
但是如果我尝试在ngAfterViewInit挂钩中检查此元素,我会发现我的元素的offsetHeight和offsetWidth为零。(有时一切正常)
我认为这是因为我创建的元素尚未在Dom中呈现吗?
有什么解决办法吗? 我正在使用Ionic 4。

HTML:

<div id="map" #map [style.height.px] = "'300'" [style.width.px]="'100'"></div>
TS:

...
map: any;
@ViewChild('map') mapElement: ElementRef;

ngAfterViewInit() {
    this.loadMap();
}

loadMap() {  
    //usually return 0  
    console.log('height:' + this.mapElement.nativeElement.offsetHeight); 
    console.log('width:' + this.mapElement.nativeElement.offsetWidth);

    this.map = DG.map(this.mapElement.nativeElement);
}
...

我希望高度为300,宽度为100。

1 个答案:

答案 0 :(得分:0)

错误代码,但是有效

ngAfterViewInit() {
   setTimeout(() => {
      this.loadMap();
    }, 0);    
}