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

在Angular 1.x中，我可以执行以下操作来创建基本上不执行任何操作的链接：

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

但是，相同的标签会导航到Angular 2中的应用程序库。与Angular 2中的标签等效吗？

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

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

如果您的Angular 5或更高版本，只需更改

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

进入

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

将链接悬停在链接上时会显示带有手形图标，单击该链接不会触发任何路线。

注意：如果要保留查询参数，则应将queryParamsHandlingoption 设置为preserve：

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

一样，没有任何相关的信息angular2。这是简单的html标签。

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

编辑

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

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

普伦克

其他方法可能是使用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。

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

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>

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

希望这可以帮助

simeyla解决方案：

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

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

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

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

这是一个简单的方法

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

捕获冒泡事件并将其击落

以下是一些方法：

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

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

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

就我而言，删除href属性解决了问题，只要有一个分配给a的点击函数即可。

您已阻止默认浏览器行为。但是您无需创建指令即可完成此操作。

如以下示例所示，这很容易：

my.component.html

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

my.component.ts

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

更新了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();
    }
  }
}

我有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和routerLinkActive（Angular 7）

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

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

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

在html中

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

在ts文件中

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

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

真正简单的解决方案是 (click)="(null)"

<a class="btn btn-default" (click)="(null)">Default</a>