RedirectTo with Parameter

Question

On a basic requirement, I'm trying to implement a Route that will redirect to another route and add a parameter to the Component. This is for an upload management.

Actually we have two routes:

/documents: Show the list of documents
/documents/upload: Show the list of documents and make a modal box with the upload form appear

The matter is that I also have GET parameter in the URL that I need to keep. But now, I would like to only the route /documents showed in the URL and not /documents/upload which can be confusing since if we close the modal, it's the same page.

So, my expected result is that going to the page /documents/upload?foo=var&toto=1234 would redirect to /documents?foo=var&toto1234 and keep a variable to tell me that I need to open the modal.

I've created my guard to redirect, but it seems that my queryParams aren't preserved, even with the preserveQueryParams at true. Is it an issue or am I missing something?

canActivate(): boolean {
    this.documentsService._isUploading = true;
    this.router.navigate(['documents'], { preserveQueryParams: true });

    return true;
}

And my route definition:

{ path: 'documents', component: DocumentsComponent}, 
{ path: 'documents/upload', component: DocumentsComponent, canActivate: [UploadRedirectionGuard]}

Final solution for those who were encountering the same issue:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    this.documentsService._isUploading = true;
    this.router.navigate(['documents'], { queryParams: state.root.queryParams });

    return true;
}

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

I think what you are looking for is https://github.com/angular/angular/issues/12664

See also Angular2 router keep query string

Currently I guess you need to use a workaround like a guard that reads the query and calls this.router.navigate(...) and re-adds the query when redirecting instead of the declarative redirectTo in the route.

You might need a component: MyDummyComponent instead of redirectTo: '...' There is also some change work in progress or already released (don't know) to be more forgiving in such cases.

edited May 23 '17 at 11:46

Community

1
1

answered Dec 12 '16 at 07:42

Günter Zöchbauer

623,577
216
2,003
1,567

So I would have the upload as a parameter in the URL? No possibility to pass a "hidden" parameter? I could also define it in the DocumentService, not sure if it's a good practice. – LoïcR Dec 12 '16 at 09:43
There can't be a a "hidden". What if someone bookmarks the page and opens it from the bookmark, then the parameters would be lost. Sure you can pass the query params to a service and then allow other services and components to inject it to get the query values. – Günter Zöchbauer Dec 12 '16 at 09:46
Actually the link will be unique and generated, it's for a very large company intranet. I'll stick with the service parameter then. Thanks for your helpful answer! – LoïcR Dec 12 '16 at 09:51
Hey, I'm encountering a new issue while trying to implement the solution, could you take a look at my edit? – LoïcR Dec 12 '16 at 11:12
There probably aren't any query parameters anymore. You need to get the query params from the route that is first loaded and then pass them along. – Günter Zöchbauer Dec 12 '16 at 11:20
1

Ended up by retrieving the params with RouterStateSnapshop.root.queryParams and injected it in the queryParams of NavigationExtras. Many thanks to you! – LoïcR Dec 12 '16 at 13:20

RedirectTo with Parameter

1 Answers1