CODEWITHSUNDEEP
angularangular2-routing
Ghetolay
Ghetolay

Reputation: 3342

routerLink absolute url

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

Upvotes: 47

Views: 70913

Answers (7)

Pusztai Tibor
Pusztai Tibor

Reputation: 31

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: '' } }]"

Upvotes: 3

devSK
devSK

Reputation: 2026

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.

Upvotes: 67

DINESH Adhikari
DINESH Adhikari

Reputation: 1366

<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

Upvotes: 0

Angel Bolado Carletti
Angel Bolado Carletti

Reputation: 11

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

Upvotes: 1

Deepesh Nair
Deepesh Nair

Reputation: 370

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

Upvotes: 10

Muhammad Hamza Shujaat
Muhammad Hamza Shujaat

Reputation: 463

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!

Upvotes: 0

zurfyx
zurfyx

Reputation: 32807

You can use relative paths:

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

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

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

Will redirect to '/'

Upvotes: 24

Related Questions