My application is something like Google Maps, where the majority of functions and logic takes place in a MapComponent, a direct child of the root component (AppComponent). So my component Tree looks like this:
AppComponent (root) \ MapComponent (child)
Now I want to add few more static pages, like about and contact, and I want to use the NavController to control the navigation. I have two options here:
Include the MapComponent in a page (MapPage) and then use it alongside with other pages so the tree structure becomes this:
MapPage AboutPage ContactPage…
The problem with this approach is, every time user navigates away from the MapPage, the page gets destroyed along with its MapComponent. And then when user comes back to MapPage, MapComponent gets constructed again which is not good because it is a costly component (rendering a map from remote)
In short, NavController destroys its components when user navigates to another page.
My second option is to do something like this: Move the MapComponent directly under App, so that it becomes a sibling with Nav and do not get effected by the rest of navigation. It’s cleaner, and saves the MapComponent constuct/destroy efforts, but this time it cant be navigated from other pages.
App_______________ | \ MapComponent Nav______________ \ \ AboutPage ContactPage...
Does anyone have an idea how to mix these two approaches together? (or is there an existing solution for this that I am not aware of?)
Ideally, I wish I could have some components lying under the NavComponent (which streches over the entire screen as expected) and with a click I could move the entire NavComponent off screen and access the components beneath. And also, the back/forward navigation buttons would work as if the underneath components were a page.
I look forward to hear your comments! Thanks!