Help routing ionic 4

Ionic Framework
1

help i have two ion router outlet becouse use custom qrcode native it works but when return to home when click other routes not enter on this ç_ç please help me friends

<!--<ion-app *ngIf="!this.auth.location.isCurrentPathEqualTo('/HomeFactory')">
  <ion-router-outlet></ion-router-outlet>
</ion-app>
-->


<ion-app  *ngIf="!this.auth.location.isCurrentPathEqualTo('/NuovoPacco')" style="background:white;">
    <ion-router-outlet ></ion-router-outlet>
</ion-app>

<ion-app *ngIf="this.auth.location.isCurrentPathEqualTo('/NuovoPacco')" style="height:100vh;">
    <router-outlet></router-outlet>
    <ion-header *ngIf="this.auth.location.path() ==='/NuovoPacco'">
        <ion-toolbar>
            <div style="position:relative;left:10px;width: 20px;height:20px;"(click)="this.auth.BackPage()"><img style="width:20px;height:20px;" src="assets/icon/ic_arrow_back.png"></div>
            <ion-title>Inscatolamento</ion-title>
        </ion-toolbar>
    </ion-header>

    <div style="width:100vw;height:20%;background:#ffffff;position:absolute;top:0;"></div>
    <div style="width:100vw;height:25%;background:#ffffff;position:absolute;bottom:0;"></div>
    <div style="width:25%;height:100vh;background:#ffffff;position:absolute;left:0;"></div>
    <div style="width:25%;height:100vh;background:#ffffff;position:absolute;right:0;"></div>
</ion-app>
<!--<ion-button  *ngIf="this.auth.location.path() ==='/HomeFactory'" color="danger" (click)="this.qr.readQr()">bottone</ion-button> -->
<!-- <ion-content  *ngIf="this.auth.location.isCurrentPathEqualTo('/HomeFactory')">
</ion-content> -->
2

If you don’t get any better answers, I would rearchitect this so there is only one router outlet.

3

I found a way to change the graphics of qr code without using two ion-app with dedicated router but injecting the html inside ion app is graphically slow and ugly would be nice to have more webview without encountering problems I know that I could change the plugins from only, but unfortunately the native ionic qr code plugin is not customizable because it wants the webview to be totally transparent

4

What specifically are you describing here?

5

i made multiply routes because i wanted to customize the graphics of qr code because
otherwise he would have seen all the webview ,
and to change the qr code just created another route.

the alternative is

 const ionApp = document.getElementsByTagName ('ion-app') [0];
  ionApp.style.backgroundColor="transparent";
  ionApp.innerHTML = '<div>html here</div>';

I hope you can tell me if it’s right.

here the plugin https://beta.ionicframework.com/docs/native/qr-scanner

6

the problem is not inject function with my solution :frowning:

7

I don’t know if you’ve investigated other options for this, but there is this perception that just because it has “QR” in its name, it’s the only option for scanning QR codes. In fact, other barcode scanners like the stock BarcodeScanner or ZBar also work with QR codes. I personally use ZBar because of its speed, and if you decide to go that route you might want to look into this fork for cordova-android 7+ support.

8

thanks but
I was seeing that I’m looking for other solutions I also saw that you can change the native code that you know I can change the view in order to decide the size of the camera so that it does not scan even behind the graphics?

9

If you insist on going down the multiple router outlet road, two suggestions:

  • don’t flip them in and out of the DOM with ngIf - leave them in to avoid the router getting confused
  • give them each a name and use the idiom described in the “multiple outlets” section of the router docs.
10

ok i try it i seen this way thanks
the mechanism to make everything transparent to see the camera also takes zbar?

11

zbar crash on ios… with ionic 4