第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular 和 Ionic 組件中的 clientHeight 和 clientWidth

Angular 和 Ionic 組件中的 clientHeight 和 clientWidth

呼喚遠(yuǎn)方 2022-01-13 10:57:09
我有條形碼組件,使用時它應(yīng)該以正確的寬度和高度(容器寬度和高度)顯示條形碼掃描儀。這些值是正確初始化掃描儀所必需的。我想使用有角度的 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;        }    }}當(dāng)我檢查控制臺日志時,clientHeight 和 clientWidth 始終為零,所以我嘗試使用 setTimeout(); 添加超時 方法。這有效,但前提是我等了 3 秒。零是行不通的。還有其他我可以使用的解決方案嗎?我嘗試將條形碼組件源直接放入我計(jì)劃使用它的頁面中。這工作正常,但我真的很好奇為什么這不起作用。
查看完整描述

1 回答

?
SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個贊

為了獲得從模板到組件的高度,您可以使用 @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;

  } 


查看完整回答
反對 回復(fù) 2022-01-13
  • 1 回答
  • 0 關(guān)注
  • 278 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號