如何在Angular 2中获得元素宽度或高度？

Question

加载图像后无法获得真实的宽度或高度。有谁知道如何以正确的方式做到这一点？

HTML：

<div class="editor-container">
    <img src="{{photoUrl}}" alt="" />
</div>

CSS：

.editor-container {
  position: relative;
  width: 100%;
}

.editor-container img {
  display: block;
  width: 100%;
  height: auto;
}

打字稿：

ngAfterViewInit(){
    try {
        console.log( document.getElementsByClassName('editor-container') );
        console.log( document.getElementsByClassName('editor-container')[0] );
        console.log( 'clientWidth', document.getElementsByClassName('editor-container')[0].clientWidth );
        console.log( 'scrollWidth', document.getElementsByClassName('editor-container')[0].scrollWidth );
    } catch (err) {
        console.error(err);
    }
}

结果：

the console log image

Answer 1

问题解决了，因为div限制了图片的大小。

CSS

.editor-container {
  position: relative;
}

.editor-container img {
  display: block;
  height: auto;
}