0

In my application, I have a side menu with items(home, contact, tab1, tab2) and tabs menu with tabs(tab1, tab2). When I click on tab1 or tab2 from side menu then tabs menu is visible on my page with the side menu, But when I click Home or Contact from side menu then tabs menu disappears. I need tabs menu and side menu for all pages. If I click on home from the side menu, tabs menu should be there in home page with no active tab.

Thank you for your help.

Tabs.html

<ion-tabs [selectedIndex]="myIndex">
    <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="HOME"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="BOND"></ion-tab>
  </ion-tabs>

Tabs.ts

 tab1Root = Tab1Page; tab2Root = Tab2Page;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.myIndex = navParams.data.tabIndex;
  }

Menu.ts

rootPage = TabsPage;


@ViewChild(Nav) nav: Nav;
  pages: PageInterface[] = [
    { title: 'Home', component: HomePage },
      { title: 'Contact', component: ContactPage},
      { title: 'Tab 1', component: TabsPage,tabComponent: Tab1Page, index:0 },
      { title: 'Tab 2', component: TabsPage,tabComponent: Tab2Page, index:1 },
  ];
  constructor(public navCtrl: NavController, public navParams: NavParams,
  private app:App) {
  }
  openPage(page: PageInterface)  {
    let params = {};

    // The index is equal to the order of our tabs inside tabs.ts
    if (page.index) {
      params = { tabIndex: page.index };
    }

    // If tabs page is already active just change the tab index

      if (this.nav.getActiveChildNavs().length && page.index != undefined) {
        this.nav.getActiveChildNavs()[0].select(page.index);
      } else {

        this.nav.setRoot(page.component,params);
      }

  }

Menu.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title text-center class="clss_toogle_mnu"></ion-title>
    </ion-toolbar>
  </ion-header>

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

</ion-content>

</ion-menu>


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

Edit : In menu.ts, I have added params in setRoot.

Kruti Patel
  • 1
  • 3

1 Answers1

0

try to this way in your menu.ts file 

pages: PageInterface[] = [
{ title: 'Menu', pageName: 'TabsPage', tabComponent: 'HomePage', index: 0, icon: 'home' },
{ title: 'List', pageName: 'TabsPage', tabComponent: 'ListPage', index: 1, icon: 'contacts' },
{ title: 'Test', pageName: 'TestPage', icon: 'home' }]

and also try to this in openPage method 

if (this.nav.getActiveChildNavs() && page.index != undefined) {
    this.nav.getActiveChildNavs().push(page.index);
} else {
  this.nav.push(page.pageName);      
}

I hope it will be helpful

VNirav
  • 64
  • 6