181

在 Angular 1.x 中，我可以执行以下操作来创建一个基本上什么都不做的链接：

<a href="">My Link</a>

但是同一个标签在 Angular 2 中导航到应用程序库。在 Angular 2 中，它的等价物是什么？

编辑：它看起来像 Angular 2 路由器中的一个错误，现在github 上有一个关于此的未解决问题。

我正在寻找开箱即用的解决方案或确认不会有任何解决方案。

4

17 回答 17

254

如果您有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>
于 2017-08-02T16:00:40.843 回答
99

那将是相同的，它没有任何与angular2. 它是简单的 html 标签。

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

编辑

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

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

Plunkr

其他方式可能是使用routerLink带有传递值的指令，""最终将生成空白href=""

<a routerLink="" (click)="passTheSalt()">Click me</a>
于 2016-02-25T21:58:56.300 回答
21

有一些方法可以用 angular2 来做，但我强烈不同意这是一个错误。我不熟悉 angular1，但这似乎是一个非常错误的行为，即使您声称在某些情况下很有用，但显然这不应该是任何框架的默认行为。

除了分歧之外，您可以编写一个简单的指令来获取所有链接并检查href's 内容，如果它的长度为 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 。

于 2016-02-26T00:57:35.927 回答
17

一个锚应该导航到某个东西，所以我猜它路由时的行为是正确的。如果您需要它来切换页面上的某些内容，它更像是一个按钮？我使用引导程序，所以我可以使用它：

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>
于 2017-01-05T09:09:36.303 回答
14

我在 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>

希望这可以帮助

于 2016-12-02T08:01:14.317 回答
12

西美拉解决方案：

<a href="#" (click)="foo(); false">
<a href="" (click)="false">
于 2017-09-20T09:15:58.480 回答
5

您已阻止默认浏览器行为。但是你不需要创建一个指令来完成它。

这很简单，如下例所示：

我的.component.html

<a href="" (click)="goToPage(pageIndex, $event)">Link</a>

我的.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}
于 2017-06-09T19:05:07.503 回答
4

以下是一些方法：

  • <a href="" (click)="false">Click Me</a>

  • <a style="cursor: pointer;">Click Me</a>

  • <a href="javascript:void(0)">Click Me</a>

于 2017-08-04T21:47:51.687 回答
4

这是一个简单的方法

  <div (click)="$event.preventDefault()">
            <a href="#"></a>
   </div>

捕捉冒泡事件并将其击落

于 2017-01-20T20:49:08.930 回答
4

为 Angular 5 更新

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector : '[href]'
})
export class HrefDirective {
  @Input() public href: string | undefined;

  @HostListener('click', ['$event']) public onClick(event: Event): void {
    if (!this.href || this.href === '#' || (this.href && this.href.length === 0)) {
      event.preventDefault();
    }
  }
}
于 2018-02-01T14:54:37.897 回答
3

不知道为什么人们建议使用routerLink=""，对我来说，在 Angular 11 中它会触发导航。这对我有用：

<div class="alert">No data yet, ready to <a href="#" (click)="create();$event.preventDefault()">create</a>?</div>
于 2021-03-30T21:19:18.537 回答
3

在我的情况下，只要有一个 click 函数分配给 a，删除 href 属性就可以解决问题。

于 2017-03-27T14:22:38.330 回答
3

我有 4 种虚拟锚标签的解决方案。

    1. <a style="cursor: pointer;"></a>
    2. <a href="javascript:void(0)" ></a>
    3. <a href="current_screen_path"></a>

4.如果您使用引导程序：

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>
于 2018-04-17T14:40:24.923 回答
2

一个非常简单的解决方案是不使用 A 标签 - 使用 span 代替：

<span class='link' (click)="doSomething()">Click here</span>

span.link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}
于 2017-04-12T01:15:11.190 回答
1

您需要防止事件的默认行为如下。

在 html 中

<a href="" (click)="view($event)">view</a>

在 ts 文件中

view(event:Event){
 event.preventDefault();
 //remaining code goes here..
}
于 2020-07-15T13:32:19.997 回答
0

我想知道为什么没有人建议 routerLink 和 routerLinkActive (Angular 7)

<a [routerLink]="[ '/resources' ]" routerLinkActive="currentUrl!='/resources'">

我删除了href，现在使用它。使用 href 时，它会转到基本 url 或重新加载相同的路由。

于 2018-12-22T09:15:30.247 回答
-3

为 Angular2 RC4 更新：

import {HostListener, Directive, Input} from '@angular/core';

@Directive({
    selector: '[href]'
})
export class PreventDefaultLinkDirective {

    @Input() href;
    @HostListener('click', ['$event']) onClick(event) {this.preventDefault(event);}

    private preventDefault(event) {
        if (this.href.length === 0 || this.href === '#') {
            event.preventDefault();
        }
    }
}

使用

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: PreventDefaultLinkDirective, multi: true})]);
于 2016-07-20T00:06:41.643 回答