routerLink absolute url

Question

From angular docs :

The router link directive always treats the provided input as a delta to the current url.

For instance, if the curre

Answer 1

I suppose the easiest way to do it would be

<a [routerLink]=['/path/you/want', varibleToBeUsed]></a>

example

let link.path = 'something';

<a [routerLink]="['/',link.path]">test</a>
<!--
www.test.com/something
-->


<a [routerLink]="['/user/jim',link.path]">test2</a>
<!-- this will append to the base path 
i.e. www.test.com/user/jim/something
-->



<a [routerLink]="['jim',link.path]">test3</a>  
<!-- this will append to current url path 
i.e. if your current path is www.test.com/login then it will append as
www.test.com/login/jim/something
-->

Answer 2

HTML:

 <a id="id" class="link" (click)="goToDetail(value)">{{ value }}</a>

TS:

goToDetail(value) {
  this.router.navigate([this.urlDetalle + value]);
}

this.urlDetalle is the absolute path an I concat the value to view the detail of any entity

It works fine!!

Answer 3

A work-around to your problem might be to put a click event on your html element, you can then pass your url into the eventhandler and reroute anywhere using 'Router' imported from '@angular/router':

<a (click)="reRoute(urlToRoute)"></a>

then in the component's .ts file:

     import { Router} from '@angular/router';
..
    constructor(private router: Router,
        ) { }
..

    reroute(url) {
 this.router.navigate([url])
}

Hope this solves your problem!

Answer 4

As of August, 2018, Angular docs say:

• 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.

Answer 5

<a [routerLink]="['./user1', id]">User1 detail</a> // this is child of the current activated route

<a [routerLink]="['/user2']">User2</a> // this is absolute new router

Answer 6

You can use relative paths:

<a [routerLink]="['./']"

Will redirect to your upper parent (/user/jim)

<a [routerLink]="['']"
<a [routerLink]="['/']"

Will redirect to '/'