Question

来自angular docs：

路由器链接指令始终将提供的输入视为增量   到目前的网址。

例如，如果当前网址为/user/(box//aux:team)。那么   将生成以下链接<a [routerLink]="['/user/jim']">Jim</a>   链接/user/(jim//aux:team)。

那么如何创建指向/user/jim的链接？

我尝试了['/user/jim', { outlets: { aux: null }}]，但这不起作用即使它起作用也不是最佳解决方案。我宁愿寻找一种方法来导航到一个绝对网址，而不是取消 possibles 网点。

编辑：

在同一主题上，我有一个指向root的链接：routerLink="/"就是这样，它会重定向到我的应用程序的根目录而没有像绝对链接那样的出口。这里有趣的是我并不特别想要那个特定链接的行为，保持任何网点路线都很好......

Answer 1

您可以使用相对路径：

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

将重定向到您的上级父级（/user/jim）

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

将重定向到'/'

Answer 2

截至2018年8月，Angular文档说：

如果第一段以/开头，则路由器将从应用程序的根目录查找路由。

如果第一段以./开头或不以斜杠开头，则路由器将查找当前段的子段   激活的路线。

如果第一段以../开头，则路由器将上升一个级别。

Answer 3

截至2020年5月，尚无可用于内置[routerLink]的初始问题的有效答案，所以来了。

在您的问题中，['/user/jim', { outlets: { aux: null }}]的想法很好，但是您必须明确指定主要出口：

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

（据我所知，当前无法在没有取消可能的出口的情况下将[routerLink]与绝对网址一起使用。）

您可以按照相同的逻辑进行编辑。如果您不更改辅助出口，而是将主出口明确设置为空（根），则可以导航到根并保留当前出口：

[routerLink]="['/', { outlets: { primary: '' } }]"

Answer 4

解决问题的方法可能是在你的html元素上放置一个click事件，你可以将你的url传递给eventhandler并使用从'@ angular / router'导入的'Router'重新路由到任何地方：

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

然后在组件的.ts文件中：

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

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

希望这能解决你的问题！

Answer 5

我想最简单的方法是

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

示例

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 6

HTML：

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

TS：

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

this.urlDetalle是一个绝对路径，我将其合并以查看任何实体的详细信息

效果很好！

Answer 7

<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

routerLink绝对网址

7 个答案: