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

如果您有 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>

---

这将是相同的，它没有与 angular2 相关的任何内容。它是简单的 html 标签。

基本上 a(anchor) 标记将由 HTML 解析器呈现。

编辑

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

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

Plunkr

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

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

---

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

除了不同意，您可以编写一个简单的指令来获取所有链接并检查 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，其中包含一个工作示例。

---

simeyla solution：

<a href="#" (click)="foo(); false">
<a href="" (click)="false">

---

以下是一些方法：

点我

点击我

点击我

---

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

这很简单，如下例所示：

我的.component.html

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

我的.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}

---

这是一个简单的方法

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

捕捉冒泡事件并将其击落

---

为 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();
    }
  }
}

---

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

---

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

---

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

<div class="alert">No data yet, ready to <a href="#" (click)="create();$event.preventDefault()">create</a>?</div>

---

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

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

span.link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

---

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

在 html 中

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

在 ts 文件中

view(event:Event){
 event.preventDefault();
 //remaining code goes here..
}

---

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

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

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

---

为 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})]);

---