角2的被动链接-等效

小开

这将是相同的，它没有任何相关的 angular2。它是简单的 html 标签。

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

剪辑

你可以禁用的 href上有 javascript:void(0)，所以什么也不会发生在它上面。(但它的黑客攻击)。我知道角度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})]);

下面是一个普林克的工作示例。

小开

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

小开

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

希望这个能帮上忙

小开

锚应该能够导航到某个地方，所以我猜它的行为是正确的。如果你需要它来切换页面上的东西，它更像一个按钮？我使用 bootstrap，所以我可以使用这个:

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

小开

这是一个简单的方法

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

捕捉冒泡事件，并将其击落

小开

在我的例子中，删除 href 属性可以解决问题，只要有一个 click 函数分配给。

小开

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

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


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

小开

您已经阻止了默认的浏览器行为，但是不需要创建指令来实现这一点。

这个例子很简单:

My.Component. html

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

我的组件

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

小开

最佳答案

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

小开

这里有一些方法:

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

小开

西梅拉解决方案 :

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

小开

角度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. 如果你正在使用 bootstrap:

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

在档案里

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

小开

不知道为什么人们建议使用 routerLink=""，对我来说在角11它触发导航。这就是对我有效的方法:

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