Navigate To Root Page Not To Last Visited Page In Ionic Tabs Issues Solved
Hello Everyone , All of you must have faced once this problem while implementing the Tabs in your ionic application and in one of my project "everything was working fine except the navigation in tabs".
Problem is when i clicked on tabs it takes me to the last visited tabs and not to the root tabs and it open the root page when i clicked on tabs twice.
For Example:
If i'm in last visited page under tab "Page1" and then i clicked on tab "Page2" and then clicked on "Page1" tab it open the "SubPage3" instead of "SubPage1" which has been set as root of tab "Page1".
Below is code to solved this problem:
In tab.html
In tab.ts
Note: Inside the tabs, When you navigate from page1 to page2 , used only
If you use
it will open the last visited page instead of root page of tabs
Note: Used this.navCtrl.setRoot("Tab Page Reference"), Suppose you are in inside a page which comes under the tab2 and when you come from that page to tab1 then you need use this.navCtrl.setRoot("Tab Page Reference")
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="HOME" tabIcon="customicon" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="ITEMS" tabIcon="customicon1" ></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="POST" tabIcon="customicon2" ></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="CHAT" tabIcon="customicon3" ></ion-tab>
</ion-tabs>
Problem is when i clicked on tabs it takes me to the last visited tabs and not to the root tabs and it open the root page when i clicked on tabs twice.
For Example:
Page1
Subpage1 (root)
Subpage2
Subpage3 <-- Last visited page
Page2
Page3
If i'm in last visited page under tab "Page1" and then i clicked on tab "Page2" and then clicked on "Page1" tab it open the "SubPage3" instead of "SubPage1" which has been set as root of tab "Page1".
Below is code to solved this problem:
In tab.html
<ion-tabs (ionChange)="tabChanged($event)">
<ion-tab [root]="tab1Root" tabTitle="HOME" tabIcon="customicon" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="ITEMS" tabIcon="customicon1"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="POST" tabIcon="customicon2" ></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="CHAT" tabIcon="customicon3" ></ion-tab>
</ion-tabs>
In tab.ts
tabChanged($ev) {
$ev.setRoot($ev.root);
}
Note: Inside the tabs, When you navigate from page1 to page2 , used only
this.app.getRootNav().getActiveChildNav().select(0);
If you use
this.navCtrl.push("page");
this.navCtrl.setRoot("page");
it will open the last visited page instead of root page of tabs
SECOND OPTION
tabChanged($ev) {
switch ($ev.tabTitle) {
case "HOME":
this.tabRef.select(0); //first tab
break;
case "ITEMS":
this.tabRef.select(1);//second tab
break;
case "POST":
this.tabRef.select(2); // thired tab
break;
case "CHAT":
this.tabRef.select(3); // fourth tab
break;
default:
break;
}
}
Note: Used this.navCtrl.setRoot("Tab Page Reference"), Suppose you are in inside a page which comes under the tab2 and when you come from that page to tab1 then you need use this.navCtrl.setRoot("Tab Page Reference")
No comments :
Post a Comment