fix: fix incorrect nav animations

[hoi4]

This PR is a follow-up to https://github.com/ionic-team/ionic-framework/pull/28188.

Respective issue: #28307

It fixes an issue where the nav animation is sometimes incorrect when using the browser back and forward buttons to navigate through multiple pages. The last nav animation in the following video should be forward, but is back instead.

https://github.com/ionic-team/ionic-framework/assets/23243256/d7d6edea-9180-47e3-b27a-cc6ae1b6bb1b

Angular's navigation ids are not a reliable solution because Angular does not reuse navigations. From the docs:

From the perspective of the router, the router never "goes back". When the user clicks on the back button in the browser, a new navigation ID is created.

Solution

Ionic already manages a navigation stack internally. Instead of "guessing" the nav animation direction based on Angular's router navigation ids, we can use the navigation stack to derive the required nav animation.

Recording with my changes:

https://github.com/ionic-team/ionic-framework/assets/23243256/29747971-b797-4de0-a59b-56f450c4bb2f

---

Does this introduce a breaking change?

• [ ] Yes
• [x] No

[hoi4]

FYI, @liamdebeasi :)

[liamdebeasi]

Hey @hoi4,

Thanks for making a separate PR! Does this PR already have an associated issue? If so, can you please link it in the PR template? If not, could you please make one and include a reproduction?

[hoi4]

@liamdebeasi issue created and linked ✅