Split pane opened

Hi, i have the following problem, all the app works fine, but when i close the app and then i open it, the split pane begin opened (i have to rotate the movil to fix it)…

It happens when I proof on my phone with the apk, because with ionic serve it error doesnt appear, How can i solve it? (ionic3)

this is my split-pane.ts

export class SplitPaneProvider {

  public splitPaneState: boolean;

  constructor(public platform: Platform) {
    console.log('Hello SplitPaneProvider Provider');
    this.splitPaneState = false;
  }

  getSplitPane(){
    if(localStorage.getItem('userData')){
      if(this.platform.width() > 850){
        this.splitPaneState = true;
      }else{
        this.splitPaneState = false;
      } 
    }else{
      this.splitPaneState = false;
    }
    return this.splitPaneState;
  }
}

this is my app.html

<ion-split-pane [when]="splitPaneProvider.getSplitPane()"> <!--cuando sea true-->
<!--  our side menu  -->
<ion-menu [content]="content" *ngIf="visible()"> 
    <ion-header>
    <ion-toolbar>
        <ion-title>Mi Perfil</ion-title>
    </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-list>
            
            <ion-item>
                <ion-icon item-left color="primary" name="ios-build-outline"></ion-icon>
                <span color="primary">{{datosUsuario.nombres}}&nbsp;</span>
                <span>{{datosUsuario.apellidos}}</span><br>
                <span>{{datosUsuario.turno}}</span><br>
                <span>{{datosUsuario.email}}</span>
            </ion-item>
            
            <button ion-item  (click)="logout()">
                <ion-icon item-left color="primary" name="log-out"></ion-icon>
                Desconectarse
            </button>

        </ion-list>
    </ion-content>


</ion-menu>

<!-- the main content -->
<ion-nav [root]="rootPage" main #content></ion-nav>
</ion-split-pane>

and app.component.ts

export class MyApp {
  rootPage:any = WelcomePage;
  datosUsuario = {"nombres":"","apellidos":"","turno":"", "email":""};
  
  @ViewChild('content') nav: NavController;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,public splitPaneProvider: SplitPaneProvider, public app: App, public menu: MenuController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
     
    });
  }

  visible(){ //MUESTRA SIDEBAR AL HABER USUARIO EN LOCALSTORAGE
    if(localStorage.getItem('userData')){
      let data = JSON.parse(localStorage.getItem('userData'));
      this.datosUsuario.nombres= data.userData.nombres;
      this.datosUsuario.apellidos= data.userData.apellidos;
      this.datosUsuario.turno= data.userData.turno;
      this.datosUsuario.email= data.userData.email;
      return true;
    }else{
      return false;
    }
  }

  backToWelcome(){
    this.nav.setRoot(this.rootPage);
  }

  logout(){
    this.menu.enable(false);
    localStorage.clear();
    this.backToWelcome();
  }

}

Hi

first thing I note is that your TS code seems not to be waiting for async events, like platform.ready and retrieving from local store. And in fact you do not seem to use the Ionic Storage recommended way of working for storage.

So possibly, you are in async hell

Regards

Tom

So, if i change my code using Ionic Storage the problem should disappear?

Hi

Not sure but at least then you will be using the recommended way for storage. Just be sure to use the promise-then pattern for storage ready and get to assure you are not in async hell.

Besides this you may need to set the visible variable in the lifecycle hook such as ionViewWillEnter. This cannot be done in app.component.ts but in any other page.

I used the event system to message a split-pane close to app.component.ts from the other pages in their ionViewWillEnter hooks

Regards

Tom

Regards

Tom