如何在 Angular 中使用 "routerLink" 启用 "ctrl+click"

Question

在Angular中，如果你使用这个：

<div routerLink="/home"> <img src="..." /> </div>

当我按下图片时，它的路由完美，我想按下 ctrl+click 在新标签页中打开这张 link，或者将这张图片拖到新标签页，但是当我按下 ctrl+click 时在同一页面打开，如果我拖动它，在新选项卡中打开的图像不是 link，我尝试使用 target="_blank" 但它不起作用。

Answer 1

您需要使用 a 标签，而不是使用 div 标签，以便浏览器知道将其视为 link。

<a routerLink="/home"> <img src="..." /> </a>

Answer 2

您似乎遇到了与 here 类似的问题，我建议您尝试这样的操作，

<a routerLinkActive="active" [routerLink]="['/home']" ><img src="..." /></a>

Answer 3

我看到很多人问过这个问题，但对我来说，这没有任何意义。

当您使用 Angular 构建应用程序时，您正在构建单页应用程序。这本质上意味着 "one browser window".

如果您单击路由器 link，根据定义，如果新组件在新 window？

您实际得到的是应用程序的第二个实例。

我建议您按照预期的方式使用 Angular 作为 SPA 应用程序，或者考虑使用不同的框架。

就是说，如果您尝试做的是在新的 window（不同的站点，或后端直接提供的内容（例如PDF 或电子表格），然后只需使用带有 href 属性的锚标记，而不是 routerLink。

Answer 4

您可以将 link 角色添加到 div

<div routerLink="/home" role="link">
  <img src="..." /> 
</div>

如果您想启用“ctrl+click”行为但没有：

How to enable "ctrl+click" with "routerLink" in Angular