Navigation within Child View using Side Menu

Ionic Framework ionic-v3
1

Here is a reference code. I am using the menu.

<ion-menu [content]="content" persistent="true">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

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

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

What should the openPage(p) function look like if I want to change the root in the ion-nav instead on pushing another page on the navigation stack? How do I pass in params in such a situation?

PS: I want to keep the sidemenu intact, just want to close it and load a new page in the menu’s content along with some parameters.

2

Presumably you’ve injected NavController in the component that is providing openPage, so it would look like:

let np = p.params ? p.params : {};
this.nav.setRoot(p.component, np);
3

What I wanted was to tap on the menu and change the child view. So I cannot use push or setRoot on the primary navCtrl. I had to get a reference to Child View.

export class MenuPage {
    @ViewChild('mycontent') childNavCtrl: NavController;

And then on button tap,

this.childNavCtrl.setRoot(ProductsByCategoryPage, {"category": category});

4

Hi

i use the same code also but there is a bit bug i think.

@ViewChild('content') childNavCtrl: NavController;


openCategoryPage(category) {

    this.childNavCtrl.setRoot('ProductsByCategory', { "category": category });
  
    console.log('end opencategory function');
  }

products-by-category page stays empty after the page is loaded i can see it in console categorys are printed.

but when i resize the window or click on the menu its load ui?

what is here the problem i’m looking days for it.

thank by advance.

5

Hi,

Please post your question in the QnA Section on Udemy.

6

i posted my question on Udemy also

thank you