Question

In Angular 1.x I can do the following to create a link which does basically nothing:

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

But the same tag navigates to the app base in Angular 2. What is the equivalent of that in Angular 2?

Edit: It looks like a bug in the Angular 2 Router and now there is an open issue on 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

simeyla solution：

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

Answer 7

一个非常简单的解决方案是不使用A标签 - 改为使用跨度：

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

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

Answer 8

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

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

4. 如果您使用的是bootstrap：

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>

Answer 9

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

Answer 10

这是一个简单的方法

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

捕捉冒泡事件并将其击落

Answer 11

在我的情况下，只要点击功能分配给。

，就删除href属性解决问题

Answer 12

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

如下例所示：

my.component.html

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

my.component.ts

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

Answer 13

以下是在Angular2 +上下文中执行此操作的所有方法：

<a href="" (click)="false">Click Me</a>
<a style="cursor: pointer;">Click Me</a>
<a href="javascript:void(0)">Click Me</a>

Answer 14

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

props.tree

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

Answer 15

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

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

Answer 16

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

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

Answer 17

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

Answer 18

您可以在属性href中添加 javascript：; ，而不是 routerLink =“”

2019-05-22 HH:MM:SS name:Jhon 1 + random_text
LOG_TEXT 1
LOG_TEXT 1
2019-05-22 HH:MM:SS name:Jhon 2 + random_text
LOG_TEXT 2
LOG_TEXT 2
2019-05-22 HH:MM:SS name:Jhon 3 + random_text
LOG_TEXT 3
LOG_TEXT 3
2019-05-22 HH:MM:SS name:Jhon 3 + random_text

在另一个页面中

使用 routerLink =“” 时遇到问题。

Answer 19

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

以html

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

在ts文件中

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

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

19 个答案: