Ionic 2 Tabs reset view when clicking another tab

Question

Wondering how I can do this. When using ionic tabs, lets say I have a simple structure like

Home
About
Product -> Product Info

In my Products page (product.ts) I have something like

viewItem(payload) {
this.navCtrl.push(ResultPage, {
  data: payload
});
}
// ^ Pass data to new Product info page.

The product info page loads fine all data passes in and I get a back arrow in the nav bar.

Now if I click another tab like About and go back to Product it still shows the pushed Product Info page.

How can I get it to reset back to the Product page when I leave the view and navigate back?

Update:

If I do this

ionViewDidLeave() {
this.viewCtrl.dismiss().catch(() => console.log('Some bug going on..'));
}

Works, but have to catch the error otherwise returns

Runtime Error Uncaught (in promise): false

If anyone has any other suggestion its much appreciated.

can you show the code of `tabs.ts` and `tabs.html` page also? — Sampath, Apr 03 '17 at 01:28
@Sampath - Yeah not alot goes on in tab.ts, similar to here - https://github.com/driftyco/ionic2-starter-tabs/blob/master/src/pages/tabs/tabs.ts Its when pushing a page, you get the back button, however navigating to another tab and the back it still shows the pushed page. With my App I need it to reset to its original state. — limit, Apr 03 '17 at 01:37

score 0 · Answer 1 · answered Apr 03 '17 at 02:01

0

NavController comes with events. One of them is ionViewDidLeave.

In that you can pop the page you don't want to be kept stacked.

ionViewDidLeave() {
   this.navCtrl.pop();
}

answered Apr 03 '17 at 02:01

Stubbies

1

I get a promise error with this. Runtime Error Uncaught (in promise): false – limit Apr 03 '17 at 02:17
Try perhaps `ionViewWillLeave` check the full list [here](https://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events) – Stubbies Apr 03 '17 at 02:21
@Erevald i have one problem here https://stackoverflow.com/questions/43716187/ionic-2-back-button-or-any-icon-is-not-showing-only-small-box-icon-is-showing – hybrid Dev May 01 '17 at 09:58

1 Answers1