logo标签列表

Angular 2中的被动链接 - <a href=""> 等效

angularroutesangular2-routingangular-router
195
在Angular 1.x中，我可以使用以下代码创建一个链接，该链接基本上什么都不做：
<a href="">My Link</a>

在Angular 2中，相同的标签导航到应用程序基础。那在Angular 2中的等效物是什么？

编辑：看起来这是Angular 2路由器中的一个错误，现在在github上有一个问题。

我正在寻找一个开箱即用的解决方案或确认是否没有。

你仍然可以做到。这只是HTML。有任何特定的用途吗？ - Sasxa
是的，它仍然是有效的HTML，但是其效果与Angular 1.x不同。 - s.alem
1
你尝试过只用<a>标签而不加上"html"吗？ - Sasxa
3
是的，但浏览器对其处理不同。我知道我可以用CSS覆盖光标效果，并将指针分配给所有a标签。但那看起来很拙劣。 - s.alem
3
我的意见是，ng1的方式是错误的。(: 默认行为应该与标准HTML中的保持一致... - Sasxa
显示剩余4条评论
18个回答
274
如果您使用的是Angular 5或更高版本，只需进行更改。
<a href="" (click)="passTheSalt()">Click me</a>

进入

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

当鼠标悬停在链接上时，会显示一个手形图标，点击链接不会触发任何路由。

注意: 如果要保留查询参数，您应该将queryParamsHandling选项设置为preserve：

<a [routerLink]=""
   queryParamsHandling="preserve"
   (click)="passTheSalt()">Click me</a>
3
这个 [routerLink]="" 在 Chrome 64 中运行 Angular 5 时会呈现为 <a href="null" (click)="myFunction()">My Link</a>。 - Zymotik
3
我可以确认在IE11中同样有效的"[routerLink] ="" / href="null"。 - Zymotik
1
<a [routerLink]="" (click)="passTheSalt()">点击我</a>在Angular7中可以使用。我发现没有使用routerLink的<a (click)="passTheSalt()">点击我</a>也可以在Angular7中使用。使用[routerLink]还是不使用routerLink来创建一个被动锚链接，哪种方式更好呢？ - Ian Poston Framer
1
@IanPostonFramer 当我移除 [routerLink]="" 后，文本“Click me”不会显示为链接，也不会显示手形光标图标。 - Emiel Koning
9
注意：这将重置您的URL参数。买家要谨慎。 - Stavm
显示剩余10条评论
109

那会是相同的，这与 angular2 没有关联。它只是一个简单的HTML标签。

基本上，a（锚点）标签将由HTML解析器呈现。

编辑

您可以通过在 href 上使用 javascript:void(0) 来禁用它，这样它就不会发生任何事情。 （但这是 hack）。我知道 Angular 1 在开箱即用中提供了此功能，但现在对我来说似乎不正确。

<a href="javascript:void(0)" >Test</a>

Plunkr

另一种方法是使用 routerLink 指令并传递 "" 值，最终会生成空的 href=""。

<a routerLink="" (click)="passTheSalt()">Click me</a>
1
我知道在Angular 1.x中#的作用。我想要一个在Angular2中什么都不做的链接，就像在Angular 1.x中的href=""一样。 - s.alem
这种表示法可能会在控制台中生成错误，供您参考。例如：XMLHttpRequest cannot load javascript:void(), Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. - Max
您可以使用preventDefault来更加优雅地禁用href，具体方法请参考此处：https://dev59.com/RFsV5IYBdhLWcg3w6iZ8#44465069 - Michael Kühnel
1
[routerLink]="" 会从你的路由中删除查询参数，这可能不是你想要的。你可以使用保留查询参数，但这似乎有点过头了。 - narthur157
4
然而，对于我来说，选项1：href="javascript:void(0);" 是有效的。 - Paul Carlton
显示剩余9条评论
22

在Angular2中可以通过某些方式来实现，但我强烈反对认为这是一个缺陷。虽然你声称在某些情况下它很有用，但在我看来，这似乎是一种非常错误的行为。任何框架都不应该默认采用这种行为。

撇开分歧，您可以编写一个简单的指令，以获取所有链接并检查其href的内容，如果长度为0，则执行preventDefault()。以下是一个小例子。

@Directive({
  selector : '[href]',
  host : {
    '(click)' : 'preventDefault($event)'
  }
})
class MyInhertLink {
  @Input() href;
  preventDefault(event) {
    if(this.href.length == 0) event.preventDefault();
  }
}

通过在PLATFORM_DIRECTIVES中添加此指令，您可以使其适用于应用程序中的所有部分。

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: MyInhertLink, multi: true})]);

这里有一个plnkr，它包含一个有效示例。

点赞一个全局的Angular解决方案，但我不会将其作为正确答案接受，因为我只是在寻找一个开箱即用的解决方案，直到他们确认没有或者我真的非常需要它。但还是非常感谢你。 - s.alem
2
pointer-events 的问题在于 IE 不支持它（caniuse）（奇怪的是，即使在 IE11 中我也可以绕过它），而且它不能阻止从控制台点击链接。我已经点赞了 @Pankaj 的答案，因为从我的角度来看，这是最简单的方法，我的答案只是用 angular2 实现它的一种方式，我可以让它更容易，但是 CSS 选择器有限。 - Eric Martinez
1
这似乎会破坏Bootstrap选项卡链接（例如<a href="#tab-id">） - xd6_
Bootstrap函数在哪个模块中？ - Jun
17

锚点应该导航到某个内容，所以我想当它路由时行为是正确的。如果您需要在页面上切换某些内容，则更像是按钮？我使用Bootstrap，因此可以使用以下内容：

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>
1
我喜欢这个解决方案。如果你想让光标显示为手形，就添加样式 "cursor: pointer"。 - newman
在许多情况下，这是一个好的解决方案，但请注意，按钮的尺寸比基于文本的锚点要大。 - yankee
@yankee，你可以在CSS中更改它，但我不建议这样做...事实是，按钮就是按钮，链接就是链接...太遗憾了，网络并不是那么黑白分明。 - Ayyash
16

我正在使用css这个解决方案:

/*** Angular 2 link without href ***/
a:not([href]){
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none
}

HTML

<a [routerLink]="/">My link</a>

希望这有所帮助

1
这是一个更好的解决方案，因为主要缺少的是视觉效果。您可以将此CSS放入Angular项目的顶级styles.css文件中，它将非常有效！ - user9903
13

simeyla solution:

<a href="#" (click)="foo(); false">
<a href="" (click)="false">
这似乎是最简单和最优雅的解决方案。 - Purple Piranha
简短回答 - SUHAIL KC
1
只需在函数中返回false，那么您就不必在使用该函数的每个标记中都记住它。 - thenetimp
8

以下是一些做法：

  • <a href="" (click)="false">点击我</a>

  • <a style="cursor: pointer;">点击我</a>

  • <a href="javascript:void(0)">点击我</a>

6
我有4个虚拟锚标签的解决方案。
    1. <a style="cursor: pointer;"></a>
    2. <a href="javascript:void(0)" ></a>
    3. <a href="current_screen_path"></a>

4. 如果您正在使用Bootstrap：

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>
5
你已经防止了默认的浏览器行为。但是你不需要创建指令来实现它。
它很容易，就像以下的例子： my.component.html 
<a href="" (click)="goToPage(pageIndex, $event)">Link</a>

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}
这将涉及更新，不涉及routerlink或null值。 - JoeCool-Avismón
5

不确定为什么有些人建议使用routerLink = ""，在我的Angular 11中它会触发导航。 这是对我有效的方法：

<div class="alert">No data yet, ready to <a href="#" (click)="create();$event.preventDefault()">create</a>?</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接