ViewChild and nav.setRoot not working with tabs page

Ionic Framework ionic-v3
1

In my application there is a menu, which contains the application options.

   ...
   @ViewChild(Nav) nav: Nav;
   ...
   in my constructor:
    this.pages = [
       { title: 'Example1', component: Example1Page },
       { title: 'Example2', component: Example2Page }]

In html:


<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Method openPage():

  openPage(page){
    this.nav.setRoot(page.component);
  }

If the rootPage attribute is started with Example2Page, the navigation works normally, but if it starts with Example1Page, which has TABS, the navigation does not work, always being on the homepage.

I could not solve it, can you help?

2

I don’t like having the same information in multiple places. If you’re going to bother having a rootPage property, why not just assign to it? You shouldn’t even need a handle to nav.