clientHeight＆clientWidth在角度和离子组件中始终为零

Question

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

我想使用Angle中的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>

SCSS：

$card-padding: 20px;
$card-border-radius: 6px;
$card-background-color: #ffffff;

:host {
    display: block;
    width: 100%;
    height: 250px;
}


::ng-deep .viewport-wrapper {
    display:block;
    width: 100%;
    height: 250px; // height: 100%;
    border-bottom-left-radius: $card-border-radius;
    border-bottom-right-radius: $card-border-radius;
    overflow: hidden;
    position: relative;
    .viewport {
        display:block;
        canvas {
            position:absolute;
            top: 0;
            left: 0;
        }
    }
}

当我检查控制台日志时，clientHeight和clientWidth始终为零，因此我尝试使用setTimeout（）添加超时；方法。这行得通，但前提是我等待了3秒。零将不起作用。

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

我尝试将条形码成分源直接放入我计划使用的页面中。这可以正常工作，但是我很好奇为什么这样做不起作用。

Answer 1

为了获得从模板到组件的高度，您可以使用@ViewChild（）...完整的工作示例在此StackBlitz Link

// 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>

//您的Component.ts是...

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

   constructor(private cdr: ChangeDetectorRef){}

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

//您的条形码Component.ts是...

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