Angular routerLink 具有自动 href

Question

在我的 Angular 应用程序中，我有很多按钮可以导航到不同的位置（导航栏等）。由于我有一个单页应用程序（SPA），这当然是由 Angular 模拟的。

目前我正在使用

[routerLink]

指令进行路由，效果很好。现在我希望我的按钮表现得更像real链接，例如

ctrl + righ click

应在新选项卡中打开链接，右键单击应显示普通锚链接的上下文菜单：

但当然，我仍然希望应用程序保持 SPA，并且在单击链接时不会重新加载。是否有实现此目标的最佳实践？我找到了 RouterLinkWithHref 指令，但我不知道这是否与之有关。

解决这个问题的解决方法是设置

routerLink

和

href

指令。

<a routerLink="/" href="/"><button mat-stroked-button>Back to dashboard</button><a>

这增加了不太漂亮的链接样式，感觉非常多余。 当然，这可以组合在自定义指令中，但我觉得我在这里描述的用例非常常见，因此应该有一个明确的解决方案。

是否有理由不将上下文操作显示为

routerLink

的默认行为，就像它是 real 链接一样？ 将带有

routerLink

的元素转换为行为类似于 real 链接的元素的最佳实践是什么（我希望应用程序中的所有路由器按钮、列表项等显示为正常链接）？

Answer 1

我已经以这种方式在我的各种角度应用程序中实现了这一点

<a href="javascript:;" routerLink="/about-us">About us</a>

仍然不确定这是否是正确的做法，但对于我来说，使用 ctrl+单击或右键单击等功能效果很好。

Answer 2

在链接（

a

标签）上使用 RouterLink 指令以及

href

应该就是您需要做的全部事情。对于内部链接，RouterLink 指令应将

href

属性添加到链接，而不需要手动添加。

<a routerLink="/about-us">About us</a>

渲染后应如下所示：

<a href="/about-us" routerLink="/about-us">About us</a>

RouterLink 指令似乎没有为外部链接自动添加

href

属性，我还没有深入研究它以找出确切的原因。在这种情况下，您提到的解决方案是“正确”的解决方案，IMO，并且添加 href 属性和 routerLink 指令没有任何问题。

<a href="https://example.com/about-us" routerLink="/about-us">About us</a>

IMO，与使用

href="javascript:;"

选项相比，这是一个更好的选项，因为它会更好地表现得像标准链接。

Answer 3

还要确保您在相关组件中导入

RouterLink

（原始答案）：

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router'; 

@Component({
  selector: 'app-some',
  standalone: true,
  imports: [RouterLink],
  templateUrl: './some.component.html',
  styleUrl: './some.component.less'
})
export class SomeComponent {

}