在Angular和Ionic组件中,clientHeight和clientWidth始终为零

时间:2019-11-27 09:27:49

标签: javascript angular dom ionic4

我有条形码组件,使用时应显示正确宽度和高度(容器的宽度和高度)的条形码扫描仪。这些值是正确初始化扫描仪所必需的。

我想使用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秒。零将不起作用。

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

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

1 个答案:

答案 0 :(得分: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;
  }