1

I am trying to conditionally redirect an angular 2 route to an external url including query string parameters.

I.E the user would click a link in a user profile button dropdown and if the server had previously indicated they belonged to a specific company it would link to an external page, otherwise that same button would pass through the normal angular single page app routing systems.

My current approach involves subscribing to the navigation start event and changing the window location href to point to the external website.

I am running into two different issues depending on how I approach this task

1.

If the query string is passed along with the routerLink path, the query strings are escaped before being passed to the remote website.

If I correct this in the subscription the browser back button will still return to the uncorrected url.

For example the following code

in the html template.

    <a [routerLink]="['/profile?id=1']" > profile </a>

and in the app.component

    this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
             if(conditional logic here){  
                 let url: string = "http://example.com" + event.url
                 window.location.href = url;
             }
          }
    }

results in the url http://example.com/profile%3Fid%3D1

If I replace the escapes in my subscription it becomes http://example.com/profile?id=1 however the browser back button goes to the broken url and loads an error page.

2.

Due to the errors above, I attempted to pass the query string via the give parameter in the router link as described in the following SO question.

How to handle query parameters in angular 2

the new router link looks like

profile

and results in a url like the following http://example.com?0=%3F&1=i&2=d&3=%3D&4=1

This seems to be using the child routing and therefore matrix parameters as mentioned in the so post.

I am not sure why this is the case as my routing.ts is simple and contains no children.

const routes: Routes = [
{path: '**', component: RouteComponent}];

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class RoutingModule { }

Additionally it seems to still be escaping special characters

My first question is if there is a official or better way to redirect angular routing to external websites (including query string params)

If not, I would appreciate any ideas about how to

a. prevent angular from escaping the query string parameters

b. prevent the back button from recognizing the url before I replace the escaped characters.(something like canceling the navigation start event)

c. prevent angular from converting the parameters to matrix parameters.

Thank you for any assistance you can provide

Community
  • 1
  • 1
  • 1
    I was able to solve this problem functionally by adding a skipLocationChange instruction to the router link. I still feel like this is a clunky solution though, so I would still appreciate suggestions – Elliot Rieflin Mar 21 '17 at 19:11

0 Answers0