42

From angular docs :

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

For instance, if the current url is /user/(box//aux:team). Then the following link <a [routerLink]="['/user/jim']">Jim</a> will generate the link /user/(jim//aux:team).

So how do you create a link to /user/jim ?

I tried ['/user/jim', { outlets: { aux: null }}] but this isn't working.
Even if it worked it wouldn't have been a optimal solution. I'm rather looking for a way to navigate to an absolute url than cancelling possibles outlets.

EDIT:

On the same subject I have a link to the root : routerLink="/" that does just that, it redirect to the root of my application without any outlets like an absolute link. What's funny here is I don't specially want that behavior for that particular link, keeping any outlets routes was fine...

Ghetolay
  • 3,222
  • 2
  • 30
  • 29

7 Answers7

63

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.
adamdport
  • 11,687
  • 14
  • 69
  • 91
vter
  • 1,881
  • 1
  • 20
  • 38
23

You can use relative paths:

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

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

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

Will redirect to '/'

zurfyx
  • 31,043
  • 20
  • 111
  • 145
9

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
-->
Lahiru Mirihagoda
  • 1,113
  • 1
  • 16
  • 30
Deepesh Nair
  • 330
  • 5
  • 6
  • I tried this but it always creates link from the root. I'm want the outcome to be as your third option. I've looked for the solution but even in the documentation it is written the same but doesn't work. – C0mpl3x May 13 '21 at 13:00
  • Do you have code somewhere? https://stackblitz.com/ example – Deepesh Nair May 26 '21 at 08:56
2

As of May, 2020, there was no working answer to the initial question which can be used with the builtin [routerLink], so here it comes.

In your question, the ['/user/jim', { outlets: { aux: null }}] idea was good, but you have to specify the primary outlet explicitly:

<a [routerLink]="['/', { outlets: { primary: 'user/jim', aux: null } }]">
  This will be a link to '/user/jim', without any route in the aux path
</a>

(As far as I know, there is no way currently to use [routerLink] with an absolute url without cancelling possible outlets.)

You can follow the same logic for your EDIT. If you don't change the aux outlet, but set the primary explicitly to empty (the root), you can navigate to the root and keep the current outlet(s):

[routerLink]="['/', { outlets: { primary: '' } }]"
Pusztai Tibor
  • 21
  • 2
1

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!!

Angel Bolado Carletti
  • 11
  • 3
0

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!

Muhammad Hamza Shujaat
  • 425
  • 1
  • 5
  • 19
  • 1
    This doesn't solve the problem with the absolute URL. – dave0688 Oct 19 '18 at 11:51
  • can you please be more specific ? what problem does this not solve. – Muhammad Hamza Shujaat Oct 23 '18 at 09:38
  • Sure. You're basically just writing an implementation of the router and how to navigate. The thread starter however asked for a way to navigate to an absolute URL. So the thing what it's about is actually the URL parameter. Normally for url you have something like "../user". but the question is here: How can one navigate to an absolute url and not to a relative? – dave0688 Oct 23 '18 at 09:42
  • My point was that when you're using the **[routerLink]** directive it always appends the input url to whatever url you are currently on. However with the function that I wrote above, it will always route to absolute url, so let's say you are currently on url _/some/url_ and you want to route to _/someOther/url_ if you input _/someOther/url_ to **routerLink** it will route you to _/some/url/someOther/url_ but with the above function you will be routed to the absolute url you give as input. – Muhammad Hamza Shujaat Oct 23 '18 at 10:05
0
<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
DINESH Adhikari
  • 1,242
  • 1
  • 12
  • 11
  • While this code may answer the question, it would be better to include some context, explaining how it works and when to use it. Code-only answers are not useful in the long run. – Mustafa Apr 22 '20 at 02:06