Introduction

NativeScript's navigation framework uses a concept of a frame that can load different pages similar to the way frames/iframes work in a browser. The only difference is that a page that you navigate away from doesn't really get unloaded, but gets shown back immediately when the user navigates back to it.

Custom Router Outlet

To support this scenario and make it easy for users to navigate between pages and use animated transitions, we decided to build our own router outlet component (referred to as page-router-outlet from now on) which caches components you navigate away from, and restores them once you go back to the original page.

The Hack

That works fine so far, but it requires a hack on our end -- we need to explicitly set the parent router's _childRouter private field when navigating back to a component or that has been loaded before to avoid breaking subsequent navigations. Here's the offending code.

Solutions

We are looking for better ways to do this, something that will use supported API and doesn't break in future releases. I am not familiar with the future plans for the routing framework, but at this point even a public setChildRouter method looks good enough as it would guarantee that the page-router-outlet implementation does not break with future Angular 2 releases.

Steps to reproduce and a minimal demo of the problem

Requires a mobile app, but the issue isn't really mobile specific. One would probably face the same issue when building a routing solution that uses frames/iframes to load component content or implement a scheme that caches components and reuses them on back navigation.

Other information
I discussed this with @tbosch in person, and it would be great to have @btford's feedback as well.

Similar issues have been discussed before:

• Programmatically prevent the destruction of components when requested #5275
• Angular2 Routing: persisting route tabs and child routes #6634

Ending this wall of text with a link to the detailed description of the way routing works in NativeScript.