被动 Link in Angular 2 - <a href=""> 等效

Question

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

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

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

编辑： 它看起来像是 Angular 2 路由器中的一个错误，现在 an open issue on github 关于它。

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

Answer 1

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

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

编辑

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

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

Plunkr

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

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

Answer 2

有很多方法可以用 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 3

已针对 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 4

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

锚点应该导航到某处，所以我猜它在路由时的行为是正确的。如果您需要它来切换页面上的某些内容，它更像是一个按钮？我使用 bootstrap 所以我可以使用这个：

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

Answer 6

这是一个简单的方法

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

捕获冒泡事件并将其击落

Answer 7

在我的例子中，删除 href 属性可以解决问题，只要有分配给 a 的点击功能即可。

Answer 8

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

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

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

Answer 9

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

很简单，如下例：

my.component.html

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

my.component.ts

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

Answer 10

如果你有Angular5或以上，只需更改

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

进入

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

link 将鼠标悬停在其上时会显示一个手形图标，单击它不会触发任何路线。

注意：如果要保留查询参数，应将queryParamsHandling选项设置为preserve：

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

Answer 11

这里有一些方法：

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

Answer 12

simeyla solution:

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

Answer 13

更新 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 14

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

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

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

我删除了 href，现在使用它。使用 href 时，是去基地 url 或重新加载相同的路线。

Answer 16

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

在html

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

在ts文件中

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

Answer 17

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

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

被动 Link in Angular 2 - <a href=""> 等效

Passive Link in Angular 2 - <a href=""> equivalent

routing

angular2-routing

angular

angular-router