角度为2的被动链接-等效

Question

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

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

但在Angular 2中，相同的标签会导航到应用程序库。角2的等效值是什么？

编辑：这看起来像Angular 2路由器中的一个bug，现在github上有一个关于这一点的公开问题。

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

Answer 1

使用angular2有很多方法，但我强烈反对这是一个bug。我不熟悉angular1，但这似乎是一个非常错误的行为，尽管正如您所说的，在某些情况下是有用的，但显然这不应该是任何框架的默认行为。

撇开分歧不谈，您可以编写一个简单的指令来获取所有链接并检查href的内容，如果它的长度为0，则执行预防默认值（），这里有一个小例子。

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

通过在PLATFORM\u指令中添加此指令，可以使其在应用程序中工作

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

这是一个plnkr示例工作。

Answer 2

那是一样的，它没有任何与angular2相关的内容。它是简单的html标签。

基本上，HTML解析器将呈现一个（锚定）标记。

编辑

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

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

普朗克尔

其他方法可以使用routerLink指令，传递"值，最终将生成空白href=""

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

Answer 3

如果你有角度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>