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

回答1:

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.

回答2:

You can use relative paths:

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

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

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

Will redirect to '/'

回答3:

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

回答4:

<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

回答5:

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!

回答6:

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

回答7:

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

来源：https://stackoverflow.com/questions/39848860/routerlink-absolute-url

标签

angular

angular2-routing