Angular 和 Ionic 组件中的 clientHeight 和 clientWidth

Question

我有条形码组件，使用时它应该以正确的宽度和高度（容器宽度和高度）显示条形码扫描仪。这些值是正确初始化扫描仪所必需的。我想使用有角度的 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;

  }