Angular 2的被动链接 – <a href="">等价
在Angular 1.x中，我可以做如下创build一个基本上什么都不做的链接：
<a href="">My Link</a> 但是相同的标签导航到Angular 2中的应用程序库。
Angular 2中有什么相同之处？
编辑：
它看起来像一个在Angular 2路由器中的bug，现在在github上有一个开放的问题 。
我正在寻找一个开箱即用的解决scheme，或者确认不会有任何问题。
这将是相同的，它没有任何有关的angular2 。 这是简单的HTML标签。
基本上（锚）标签将由HTMLparsing器呈现。
编辑
你可以通过javascript:void(0)来closures这个href ，所以什么都不会发生。 （但它的黑客）。 我知道Angular 1提供了这个function，现在看起来不正确。
<a href="javascript:void(0)" >Test</a>
Plunkr
有angular2这样做的方法，但我强烈反对这是一个错误。 我不熟悉angular1，但是这看起来像是一个非常错误的行为，尽pipe在某些情况下声明是有用的，但显然这不应该是任何框架的默认行为。
不同意见之外，你可以写一个简单的指令，抓住所有的链接，检查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 。
更改
<a href="" (click)="passTheSalt()">Click me</a>
成
<a [routerLink]="" (click)="passTheSalt()">Click me</a>
当一个链接hover在上面时，会显示一个手形图标，点击它将不会触发任何路线。
一个achor应该导航到某个东西，所以我猜这个行为在路由时是正确的。 如果你需要它切换页面上的东西，它更像一个button？ 我使用引导，所以我可以使用这个：
<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>
我正在使用这个解决方法与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>
希望这可以帮助
一个非常简单的解决scheme不是使用A标签 – 而是使用跨度：
<span class='link' (click)="doSomething()">Click here</span> span.link { color: blue; cursor: pointer; text-decoration: underline; }
这是一个简单的方法
<div (click)="$event.preventDefault()"> <a href="#"></a> </div>
捕捉冒泡事件并将其击落
在我的情况下删除href属性解决问题，只要有一个点击function分配给一个。
您已经阻止了默认的浏览器行为。 但是你不需要创build一个指令来完成这个。
这很简单，如下例所示：
my.component.html
<a href="" (click)="goToPage(pageIndex, $event)">Link</a>
my.component.ts
goToPage(pageIndex, event) { event.preventDefault(); console.log(pageIndex); }
以下是在Angular2 +上下文中的所有方法：
-
<a href="" (click)="false">Click Me</a> -
<a style="cursor: pointer;">Click Me</a> -
<a href="javascript:void(0)">Click Me</a>
simeyla解决scheme ：
<a href="#" (click)="foo(); false"> <a href="" (click)="false">
更新了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})]);
真正简单的解决方法是(click)="(null)"
<a class="btn btn-default" (click)="(null)">Default</a>
