Javascript clientHeight&；clientWidth在角度&；中始终为零；离子组分

我有条形码组件，当使用它时，它应该以正确的宽度和高度（容器的宽度和高度）显示条形码扫描仪。正确初始化扫描仪需要这些值

我想使用angular中的ElementReference获得clientHeight和clientWidth。像这样：

@ViewChild('scannercontainer') scannerContainer: ElementRef;

ngAfterViewInit() {
    console.log('Container clientHeight: ', this.scannerContainer.nativeElement.clientHeight);
    console.log('Container clientWidth: ', this.scannerContainer.nativeElement.clientWidth);
}

Html:

<div class="viewport-wrapper" #scannercontainer>
    <div [hidden]="!scannerInitialized" class="viewport" #scanner></div>
</div>

当我检查控制台日志时，clientHeight&clientWidth始终为零，因此我尝试使用setTimeout（）添加超时；方法。这很管用，但我必须等3秒钟。零是行不通的

我还可以使用其他解决方案吗

---

我尝试将条形码组件源直接放入我计划使用它的页面中。这是正确的，但我真的很好奇为什么这不起作用。

为了获得从模板到组件的高度，可以使用@ViewChild（）。。。 完整的工作示例如下所示

//您的条形码组件.ts是

 height;
  @Input ('ObjectHeight') set heightFromApp(value){
    this.height= value;
  } 

---

要获得高度和宽度，您可以使用html2canvasWhat is

scannercontainer

？此链接提供了正确的height@GaurangDhorda我添加了一些额外的HTML和SCSS代码。请检查我更新的stackblitz链接，你也可以从条形码组件中获取高度。。

// your HTML file is..

<div style="width:50vw; margin: 0 auto; border: 1px solid red; padding:1rem; text-align:center" #barcode>

     <app-barcode [ObjectHeight]="barcodeHeight" >
     </app-barcode>
</div>

@ViewChild ('barcode', {static:true}) barcode : ElementRef;

   constructor(private cdr: ChangeDetectorRef){}

ngAfterViewInit(){
   this.barcodeHeight= this.barcode.nativeElement.clientHeight;
   this.cdr.detectChanges();
}

 height;
  @Input ('ObjectHeight') set heightFromApp(value){
    this.height= value;
  }