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

Question

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

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

但是相同的标签会导航到Angular 2中的应用程序库.

与Angular 2相同的是什么？

编辑:

它看起来像Angular 2路由器中的一个错误,现在github上存在一个未解决的问题.

我正在寻找一个开箱即用的解决方案或确认没有任何问题.

Answer 1

更改

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

成

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

将鼠标悬停在链接上并单击它时,将显示带有手形图标的链接,不会触发任何路径.

Answer 2

那将是相同的,它没有任何相关的东西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>

Answer 3

有一些方法可以使用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.

Answer 4

achor应该导航到某个东西,所以我猜测它在路由时是正确的.如果你需要它在页面上切换一些东西,它更像是一个按钮？我使用bootstrap所以我可以使用这个:

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

Answer 5

我正在使用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>

希望这可以帮助

Answer 6

以下是一些方法：

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

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

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

Answer 7

simeyla解决方案：

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

Answer 8

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

Answer 9

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

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

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

Answer 10

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

就像下面的例子一样简单：

我的组件.html

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

my.component.ts

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

Answer 11

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

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