My app has three tabs:
Tab1
Tab2
Tab3
On Tab2, the user has progressed an order to completion. At this point, I want to clear the navigation stack for Tab2, and I want to navigate the user to a page that normally sits under Tab3.
Currently, this is what I've got:
this.navCtrl.popToRoot();
this.navCtrl.parent.select(TabsPage.Tab3);
this.navCtrl.push(OrderStatusPage);
Where TabsPage.Tab3 is the index of Tab3.
The reason I am popping to root is an attempt to clear the pages in the navigation stack so that when the user returns to this tab later, I want them to go back to the root page of that stack.
Then, I followed Ionic's Tab documentation which suggested I could change tab by calling this.navCtrl.parent.select.
Finally, I'm then trying to push the OrderStatusPage onto the stack.
Here's what happens when I run it:
When the application pops to root, it does appear to clear the navigation stack, but in the console I can see that it hits my logon page, which isn't on the Tabs navigation stack, so I don't understand how that happens. I also don't like how it navigates to root. Isn't there some way just to clear the stack without moving the user away from the page?
The page then successfully navigates to my Tab3 page, but the command to push the OrderStatusPage onto the stack doesn't seem to register.
Any ideas?
Each tab has its own navCtrl, so when you switch to Tab3, you need to push OrderStatusPage into Tab3's navCtrl, but you seem to be using the same this.navCtrl.
For Question 2, You don't see this.navCtrl.push(OrderStatusPage) result because you switched to tab3, but are still pushing into tab2's navCtrl!
For Question 1, you don't mention your complete page structure, but I'm guessing your three tab pages are shown on top of your login page.
You can put each tab page's navCtrl into a service or a global variable like the method that is discussed here (under: Pushing each tab page into the stack), and then push/pop into them using that service.
Also, as a side note, in case you are taking the user from one step to another step, you can also use ionic slides instead of tabs.
The closest I've come to a solution here was to add the following line of code after selecting the AccountTab:
this.navCtrl.parent.select(TabsPage.AccountTab);
setTimeout(() => {this.navCtrl.parent.getSelected().push(OrderStatusPage)}, 100);
It's not at all a good solution but hey it works.
Related
I'm developing a flutter application and I'm now struggling to understand what is the best way to implement a complex bottom bar navigation.
Here are my requirements:
each button on the nav bar should lead to a different section
each section should be able to have multiple screens inside of it
user can navigate from any page of a section to any page in another section and back
each section should show the last visited page if we come back to it
for example, let's say we have two sections, each made of two pages: SectionOneA, SectionOneB, SectionTwoA, SectionTwoB.
A few use cases:
user navigates from SectionOneB to SectionTwoB by pressing a button inside SectionOneB, when user presses back (on android) from SectionTwoB, we should navigate back to SectionOneB
user navigates to SectionTwoA by the nav bar, then navigates to SectionTwoB via a button in SectionTwoA, then navigates to SectionOneA via the nav bar and then press the SectionTwo icon in the nav bar again. we should show SectionTwoB. if back is pressed we should navigate to SectionTwoA.
in both these examples, when moving from one section to another, the correct nav bar item should be highlighted.
I'm new to flutter so I'm learning as I go. For now, what I've done is using nav bar with PageViewer to switch from section to section, then each section uses a PageViewer to handle switching from page to page. This worked well until I had to implement the first usecase above, at this point it seems to me that it would be quite challenging to implment a proper navigation stack as demanded by the usecase and I feel it would be better to rethink the whole thing, only I've no idea what is the best way to approach this.
A temporary solution would be to also include SectionTwoB in the PageViewer of section one, but that would not allow me to highlight the proper nav bar item.
Any lead on how to approach this? All the examples I find seems too simple and/or I'm failing at understanding how to connect the pieces together. I'm using flutter_bloc as a state management library.
There are 3 screens in my app. When I use popAndPushNamed() in the 2nd page, it pops the 2nd page and shows the 3rd page, but when It pops it shows the 1st page behind it in milliseconds. how to avoid that?
is Animation the way?
or are there any other methods just like push and show 3rd page, and pop 2nd page when the 3rd page visible to the user?
popAndPushNamed() as the documentation suggests, pushes the new route but pops the old route simultaneously, and hence, there is a small moment where you can see the first page even if your new routes are fully opaque. Replace the method with Navigator.of(context).pushReplacementNamed() and it should work as expected.
I would like to be able to replace the current view in the navigation
stack.
I'm designing a layout for a book which is split into 9 parts. These parts are connected together using pagination at the bottom of each part e.g. previous and next buttons.
Current structure of pages is the following: I have 1 main page (the overview) that links to all parts using this.navCtrl.push(PartXPage) (I've created pages for all 9 parts).
.
Each page, also links to the next and previous pages as so:
However, here comes the problem
When I read part1, then part2, then part3 and so on, the back button always goes back 1 view at a time. So for example, if I read all the way to part 9 in 1 go and I would like to go to the overview or the main screen, I would have to click back 9 times.
What I wanted to do is create the following logic. When a user goes to the next part, we remove the current part from the view and push the next one, so the back button always returns to the overview.
I'm looking for something like (if I am on part 1, the next button would):
go_to_part_2() {
this.navCtrl.pop() // to forget the current view
this.navCtrl.push(Part2Page) // push a new view
}
However, this code doesn't work, nor does this.navCtrl.pop().push()
You can add custom back button from ionic in navigation bar and after that when user click on back button you can set the Root page whatever you want to show to user
this.navCtrl.setRoot(PageName)
I am trying to create a new page from an existing page with a back button. I have recreated the issue here in a plunkr. In the trip analytics option When I click the first card i.e. Enter Home address. I want the todayDetail .html page to come up with a back button. I have already tried two approaches
First approach The ng-click approach. In which I give $state.go(statename) to give that page. But then I wouldn't get a back button as the navigation stack is changed.
Second approach - If I keep the navigation stack i.e. keep the state name as initial.trips.today.todayDetail. The page doesn't load at all.
What is the issue? How should I go about it?
I am using Coda-Slider for my website and I want to know if there is a way to change the content of each tab. For example, the user navigates onto tab2 where I placed a link to redirect the user to another page. Is there a way NOT to navigate away from the page nor the tab but instead load the link inside the tab? I was thinking it would look something like a modal box that would stay inside the tab instead of popping up.
see 19. Coda-Slider Sliding Tabs or you might want to try 35. JQuery IDTabs if you want the effect to be non-intrusive