How to use NSRouteReuseStrategy


#1

Hi,

I am facing an issue when needing to navigate from a component to the same component, with different data.
After some googling I found the NSRouteReuseStrategy class which should do the job, but I have no idea how to use it in my component.

According to my understanding of the Angular’s method, I did this :

 constructor(
        private nsrrs: NSRouteReuseStrategy,
        private routerExtensions : RouterExtensions
    ){
        this.nsrrs.shouldReuseRoute = function(){
            return false;
        }
}

but this makes my app crash at startup.

What is the correct way for navigating forward / backward between the same component with RouterExtensions ?


#2

@TheOnlyMatt here is an example on how to handle passing data when navigating within the component:

See DetailComponent:

The trick is to use forEach on route.params

	constructor(
		private router: RouterExtensions,
		private route: ActivatedRoute) {
	}

	
ngOnInit(): void {
	this.route.params
	.forEach(params => {
		// this.id = this.route.snapshot.params['id'];
		this.id = this.route.snapshot.params.id;
	});
}

#3

Sorry, I think I have not been clear enough.

Actually, I have no problem to send data between different views, my issue is that at a certain point in the app, a component can contain link sending to the same component.
So when I use RouterExtensions to navigate to the same component, there is no change, the app stays on the same view with the same data, while I would need to get a normal navigation process, adding the new view to the navigation history, showing a page transition etc


#4

Did you try subscribing to the router updates on which you can change or reset the data by which I believe your components in the page can be re-rendered?


#5

Unfortunately, you cannot use the page transition, as you are not really navigating to a new page, however the data should change each time you renavigate within a component.

Have you tried my playground demo app? https://play.nativescript.org/?template=play-ng&id=LAohtv&v=2
After you navigate to the detail page, you can then navigate again. Each time you do, the id will update. Isn’t this what you were after?


#6

Yup I already did this, using the angular router (not router extension), and subscribing to the route params to navigate between several views generated by a single component. And that was working fine for navigating forward, but it created two other problems.

Firstly, as the view is not cached by the router, when navigating back the animation is occuring and the view switch is ok, but the data remains the same because it is not processed by the component. I guess this point is not extremely complicated to solve,I would have to store the data when a new view is opened and set it back when a view is closed.

But the other issue is that it seems to break all the navigation history (the Nativescript one I suppose, not the angular), keeping me unable to navigate in another way than backward, on every app views.
I use the NS Router Extensions to navigate everywhere in the app, and only when the NG router is used (in this component), all the NS router links became broken.

That is why I wanted to keep using the NS Router Extensions to navigate between the same components. If it is not possible, an advice to solve the second issue would be welcome :slight_smile:

PS : I will send ASAP the error occuring when the NS router links are broken.


#7

Try this,

CustomRouteReuseStrategy

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
import { NSLocationStrategy } from 'nativescript-angular/router/ns-location-strategy';
import { NSRouteReuseStrategy } from 'nativescript-angular/router/ns-route-reuse-strategy';

@Injectable()
export class CustomRouteReuseStrategy extends NSRouteReuseStrategy {

    constructor(location: NSLocationStrategy) {
        super(location);
     }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return false;
    }
}

AppModule


@NgModule({
  ...
    providers: [
        {
            provide: RouteReuseStrategy,
            useClass: CustomRouteReuseStrategy
        }
    ],
...
})
export class AppModule { }

Route reuse strategy example for router-outlet
#8

It doesn’t work on my side, it tested it with two different projects, and in both cases if the route is the same, nothing happens, whereas if it is another route it navigates away.

I must be missing something …
I will try to upload a sample app with this issue, if you can take a look


#10

Did you try to actually look at the code? it seems to be working even in your example when I tried updating it with custom reuse strategy.


#11

Ok my bad, I forgot to update the code of my sample app.
Indeed your code does exactly what I was looking for. I found out that it was the queryParams data which was missing in my code. That is why nothing happened when trying to open the link with your code.

Thank you very much for your help !


#12

Hello there !
Few month ago I was struggling to achieve inner component navigation and succeeded to so.
I don’t know if something has broken in my app or if some NS update changed or deprecated some methods, but now this behavior seems to not working anymore as expected.
The navigation from the component is working correctly, I can navigate back to the previous step, but there is a weird error thrown at this step :

JS: Unhandled Promise rejection: Currently in page back navigation - component should be reattached instead of activated. ; Zone: <root> ; Task: Promise.then ; Value: Error: Currently in page back navigation - component should be reattached instead of activated. Error: Currently in page back navigation - component should be reattached instead of activated.
JS:     at PageRouterOutlet.activateWith (file:///data/data/com.me.myapp/files/app/tns_modules/nativescript-angular/router/page-router-outlet.js:212:19) [<root>]
JS:     at ActivateRoutes.activateRoutes (file:///data/data/com.me.myapp/files/app/tns_modules/@angular/router/bundles/router.umd.js:4050:40) [<root>]
JS:     at file:///data/data/com.me.myapp/files/app/tns_modules/@angular/router/bundles/router.umd.js:4002:19 [<root>]
JS:     at Array.forEach (<anonymous>) [<root>]
JS:     at ActivateRoutes.activateChildRoutes (file:///data/data/com.me.myapp/files/app/tns_modules/@angular/router/bundles/router.umd.js:4001:29) [<root>]
JS:     at ActivateRoutes.act...

The navigation in the component is handled by this snippet (in addition of the module CustomRouteReuseStrategy configuration) :

 ngOnInit() {
        //Gets the data passed in case of an inner app navigation
        if(this.activatedRoute.snapshot.queryParams["value"]){
            let data = JSON.parse(this.activatedRoute.snapshot.queryParams["value"])
            this.setContent(data[0])
        }
    }

someFunction(){
self.routerExtensions.navigate(["/simple_content"],  {
                                    transition: {
                                        name: "slideLeft",
                                        duration: 300,
                                        curve: "easeInOut"
                                    },
                                    //Necessary to do inner app navigation
                                    queryParams: {
                                        value: response.data
                                    }
                                })
}

Does anybody have an idea why I am facing this issue ?