Convert an internal url to act similar to routerlink

Question

I get an html from my api that gets rendered inside my angular template. It contains urls that link to other routes on my app. Example:

http://localhost:4200/some/component?query=somethingelse&foo=bar

# or preferably
/some/component?query=somethingelse&foo=bar

If i click on it, by default it reloads the app while routing.

What i want it is to redirect just route like [routerLink] does, i.e. without refreshing the page. I tried to add click method, that calls this.route.navigate, but i have to manually parse the querystrings (or use a library) to make it work.

I was hoping if angular has a better way to do it. If not, any other solution is also appreciated.

have you tried using href ? it doesn't reload if routes are set can you post routing.module.ts ? — dota2pro, May 14 '19 at 23:45
curretnly they come as `Some Name`, that is why it reload the page. — dabishan, May 14 '19 at 23:55
If you are rendering `[innerHtml]` then it won't matter. You can't use directives in dynamic HTML, because it's not compiled by the AOT. — Reactgular, May 15 '19 at 00:33
remove the trailing backslash and use it like router link routerLink="some/component?xxxxx" — Pari Baker, May 15 '19 at 01:34

score 0 · Accepted Answer · answered May 15 '19 at 20:47

remove the trailing backslash and use it like router link routerLink="some/component?xxxxx" When using routerLink you can use multiple variations especially for static links.

Please refer to the api documentation for more information found here:

https://angular.io/api/router/RouterLink

Specifically in your case this portion:

The first segment name can be prepended with /, ./, or ../:

If the first segment begins with /, the router will look up the route from the root of the app. If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route. And if the first segment begins with ../, the router will go up one level.

Also don't forget that if you are running this in dev on localhost the route will work fine, however if you are building the app the route will return an error. Router link are not full url links (hence the single page app) you would either need to map the routes on the backend or remember to add a #

RouterLink will use these to generate this link: /user/bob#education

Convert an internal url to act similar to routerlink

1 Answers1