Tabs Views with navigation, Tab Gone

Ionic Framework ionic-v3
1

In my Tabs page, I have home with list of items. In my Items I want to click to see more details but when I use push Tabs is gone. :confused:

2

Can you share your navigation code? I suspect that you are resetting the root of the navigation stack, rather than pushing on to it.

1 Like
3

TABS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the HometabsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
import { HomePage } 	from '../home/home';
import { SettingsPage } from '../settings/settings';
import { FeedsPage } from '../feeds/feeds';
@IonicPage()
@Component({
  selector: 'page-hometabs',
  templateUrl: 'hometabs.html',
})
export class HometabsPage {

	tabhomePage		= HomePage;
	tabsettingsPage = SettingsPage;
	tabfeedsPage 	= FeedsPage;
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HometabsPage');
  }
  
}

HOME WHERE I CLICK TO NAVIGATE

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, App} from 'ionic-angular';

/**
 * Generated class for the HomePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
import { BeachesPage } from '../beaches/beaches';
import { RestaurantsPage } from '../restaurants/restaurants';
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  
  

  constructor(public navCtrl: NavController, public navParams: NavParams, public app: App) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }
  	openBeachesPage(){
  		/*
  		| this is how to change page 
  		| from tabs page
  		*/
      this.app.getRootNav().setRoot(BeachesPage);
      this.navCtrl.popToRoot();
  	}
  	openRestaurantsPage(){
  		/*
  		| this is how to change page 
  		| from tabs page
  		*/

      this.navCtrl.push(RestaurantsPage);

  	}
}

RESTAURANTS PAGE WHERE I WANT TO NAVIGATE EACH RESTAURANT LIST

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, App} from 'ionic-angular';

/**
 * Generated class for the RestaurantsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
import { HometabsPage } from '../hometabs/hometabs';
import { SelectedrestaurantPage } from '../selectedrestaurant/selectedrestaurant';
@IonicPage()
@Component({
  selector: 'page-restaurants',
  templateUrl: 'restaurants.html',
})
export class RestaurantsPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public app: App) {
  }

  ionViewDidLoad() {

  }

  back() {
  	this.navCtrl.pop(); 
  }
  
  navigateRestaurant(){
    this.app.push(SelectedrestaurantPage);
  }
}

THANK YOU SO MUCH SIR.

4

I don’t know now it just work like magic. :slight_smile:

5

Yesterday it was not working. :slight_smile: