Ionic 2 - tab page back tab

Question

In front of my tab page, I have several other regular pages, and the "<Back" is always present in the left corner.

When I reach the page of my tabs, I lose "<Back" in my title. What for?

How to return the back button when using tabs in Ionic2?

Answer 1

This seems like a mistake. So it seems that it is currently not possible with what was released at npm

Please register here.

http://ionicframework.com/submit-issue/

It should be possible, but something could get in.

Answer 2

Meteor 1.2 with barbatus: ionic2-meteor

I tried what @Andreas Siivola said to try (override css for tab ion-tabs.back-button) and it popped up on the tab but unfortunately it did not put the parent page of the tab (containing <ion-tabs> ) , and I was left with the parent navigation bar and the black area where there used to be a tab view. Then I could press the parent return button and finally return to the previous page. So instead, I created my own return button so that I can bind the click event to it. At the top of all my tabs, I have a back button navigation bar.

 <ion-navbar primary *navbar> <ion-button start> <button clear light (click)="goBack()"><ion-icon name="arrow-back"></ion-icon></button> </ion-button> <ion-title>TabTitle</ion-title> </ion-navbar> 

Then in my typescript file I have a click method

 goBack():void { this.nav.rootNav.pop(); } 

The trick was to get rootNav and call pop (). This brought me back to the page that clicked the page containing the tabs.

Edit: Meteor 1.3.2.4 with ion angular NPM

I believe this will also work in a regular ionic application.

 ion-tabs ion-navbar-section ion-navbar .back-button { display: inline-block; } 

Update: Ionic 2.0.0-rc.5 Using css to make the back button appear, you can override the back button event and close the parent (Views) display controller using:

 this.nav.parent.viewCtrl.dismiss(); 

tab1.html

 <ion-navbar class="force-back-button"> 

tab1.css

 .force-back-button .back-button { display: inline-block; } 

tab1.ts

 import {OnInit, ViewChild} from '@angular/core'; import {NavController, Navbar} from 'ionic-angular'; export class TabPage implements OnInit { @ViewChild(Navbar) navBar:Navbar; constructor(public nav:NavController) { } ngOnInit() { } ionViewDidLoad() { this.navBar.backButtonClick = (e:UIEvent) => { console.log("Back button clicked"); this.nav.parent.viewCtrl.dismiss(); }; } } 

Answer 3

If you are ionizing and checking the tab page title, you should see the <ion-navbar> element. Inside this element you will see a button with a back-button class. If you check these button styles, you will see that there is a class that hides it with display: none .

Now check the class name of the <ion-page> element the button is in. In my case, this is routes-page , then create a .scss file or use an existing one (don't forget to import it into app/pages/theme/app.core.scss ).

add

 .tabs-page .back-button { display: inline-block; } 

Now you are done and you should have a back button that displays the tab page and returns to the previous one!

Answer 4

You can do something like this:

 <div block button nav-pop>go back</div> 

See: http://ionicframework.com/docs/v2/api/components/nav/NavPop/

Answer 5

Ionic navigation works like a bunch of pages:

• When you push on the page navigation, this can be considered placing a new page at the top of the heap.
• When you pop existing page, it means deleting that page from the top of the heap.
• When you set root page, it means that you clear your heap and just create a new heap with this page.

The "<Back" function will be available only if the new page is pushed , and not when the root page is installed.

To answer your original question:

On other pages, the "<Back" button is displayed, because they move to these pages just pushes them in a heap, while in the case of tabs, the "<Back" function may not be available due to setting root .

Answer 6

Perhaps you can use the (select) event and call a function that uses nav push and pop instead of using the [root] property for each tab?

http://ionicframework.com/docs/v2/api/components/tabs/Tab/

Sort of:

 <ion-tabs preloadTabs="false"> <ion-tab (select)="chat()"></ion-tab> </ion-tabs> 

and

 import {Chat} from '../chat/chat'; export class Tabs { constructor(nav: NavController){ this.nav = nav; } chat() { this.nav.push(Chat); } } 

Answer 7

Here is what I have done for my needs. The nav header is not the tab title, and this is what I wanted:

Tabs.html

 <ion-navbar *navbar primary> <ion-title> Unit # {{ unit.number }} </ion-title> </ion-navbar> <ion-content> <ion-tabs> <ion-tab tabTitle="Details" tabIcon="information-circle" [root]="_unitDetails"></ion-tab> <ion-tab tabTitle="Test" tabIcon="timer" [root]="_unitTests"></ion-tab> <ion-tab tabTitle="Tools" tabIcon="hammer" [root]="_unitTools"></ion-tab> </ion-tabs> </ion-content> 

Thus, the back button is still present and returns to the previous page.

Answer 8

If anyone comes across this problem, I think I have found the main problem in this century. The problem arises when you press "modal" or "popover", and therefore there is a problem with navigation. To do this correctly, push or setRoot 'from a page that calls popover or modal instead of'. This can be easily done using the onDidDismiss function:

 //Page which calls popover: popover.create(); //Page popover: Dismiss existing popover (you may also pass a parameter) popover.dismiss(myParameter); //Page which calls popover: Veriry if popover was removed popover.onDidDismiss(data => { if(data == "something") { //Navigate to new page this.nav.push(newPage) } });