Nativescript-angular: Transition issues navigating to the same component

[jdnichollsc]

Hi guys,
I'm navigating to the same component to show subcategories of the category selected in the previous page (CategoryListComponent). But the transition of the page-router-outlet doesn't work.

Thanks in advance, Nicholls

[tsonevn]

Hi @jdnichollsc,
If I understand you correctly, you are navigating from the main page to details page (e.g DetailPageComponent), and then you are navigating to the DetailPageComponent again while using new data.
If this is the case, this seems to be expected behaviour. The navigate method will refresh the data of the DetailPageComponent on the second navigation, but it will not make navigation to the same component.

Let me know if I am missing something or if the case is different. Also, it will help if you provide sample project, which can demonstrate your case and could be used for debugging.

[jdnichollsc]

@tsonevn no, all the pages in this demo are the same component, exist any way to recover the navigation instead of only change the data of the same page (because the param of the route is different)?

Thanks in advance

[jdnichollsc]

Other frameworks like React Native and Xamarin have the transition of the navigation, without the navigation between pages it doesn't look like a native application, any way to correct that wrong behavior?

[tsonevn]

Hi @jdnichollsc,
We rechecked your case, however, this seems to be expected behaviour while making navigation to the same component. The component will reload only its content without making navigation with a transition. This behaviour is the same in a simple Angular application as well.
In your scenario, one possible option is to create an external page for the second details page. If this is not an option for you, you can also check out how to create an animation for the ListView, which can be executed on the second load of the component.

You can also review this thread in our forum, where you will find the third option for resolving this scenario in NS Angular application. The suggested way there is to customize NSRouteReuseStrategy. More info can be found at the above-attached link.

Hope this helps