JSBarcode integration with Ionic 5

问题

i am integrating JSbarcode with ionic 5. I am using @ViewChild for barcode element in html. but the issue is that i will get undefined for viewchild because viewchild is accessed before view is completely loaded in html.

i tried with ngafterviewinit, but still it didn't work. Only thing worked for me was setTimeout as shown below.

getBarcode(){
    setTimeout(()=>{
     this.generateBarcode(this.barcode);
   },2000)  
  }

But setTimeout differs in speed across various devices hence in few devices barcode was not showing properly.

Component.ts

import * as JsBarcode from "JsBarcode";


@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {
@ViewChild('barCode') barCode;
constructor(){}

ionViewWillEnter(){
  this.generateBarcode(this.custObj.barcode); 
}
  generateBarcode(barcodeValue){
      JsBarcode(this.barCode.nativeElement, barcodeValue);
  }

}

In the above component "this.barCode.nativeElement" throws undefined.

Html

<ion-content class="content-pad" [fullscreen]="true">
  <ion-row class="barcode-image">
    <!--<ion-img class="barcode" src="./assets/images/bar.png"></ion-img>-->
    <svg  class="barcode" jsbarcode-format="EAN-13" #barCode></svg>
  </ion-row>
</ion-content>

How to display barcode in html without using setTimeout?

来源：https://stackoverflow.com/questions/62993421/jsbarcode-integration-with-ionic-5

标签

angular

ionic5

jsbarcode