带有自动href的Angular routerLink答案

【问题标题】：Angular routerLink with automatic href带有自动href的Angular routerLink
【发布时间】：2022-10-20 21:18:05
【问题描述】：

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

目前我正在使用[routerLink] 指令进行路由，效果很好。现在我希望我的按钮表现得更像真实的链接，例如ctrl + righ click 应该在新选项卡中打开链接，然后右键单击应该显示正常锚链接的上下文菜单：

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

一个解决方法是设置routerLink 和href 指令。

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

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

是否有理由说明它不是 routerLink 的默认行为来显示上下文操作，就像它是真实的关联？将带有routerLink 的元素转换为行为类似的元素的最佳实践是什么真实的链接（我想让我的应用程序中的所有路由器按钮、列表项等看起来像普通链接）？

【问题讨论】：

标签： angular routes href anchor routerlink

【解决方案1】：

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

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

仍然不确定这是否是正确的做法，但对我来说，使用 ctrl+click 或右键单击等功能可以正常工作。

【讨论】：

不错，很简单。你知道它为什么起作用吗？您是否将其用于按钮或仅用于应用程序中的链接？我有点在这里寻找最佳实践。

【解决方案2】：

在链接（a 标签）上使用 RouterLink 指令和 href 应该是您需要做的所有事情。据我了解，RouterLink 指令不能自动添加 href 属性，因为它可以用于任何元素，而不仅仅是链接标签（但是，我同意你的观点，在链接上使用时，它会很好如果它动态添加了href）。但是您提到的解决方案是“正确”的解决方案，添加 href 属性和 routerLink 指令没有任何问题。

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

IMO，与使用 href="javascript:;" 选项相比，这是一个更好的选项，因为它的行为更像标准链接。

【讨论】：