尽管雷诺给出了一个很好的解决方案

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

我个人发现在某些情况下还需要$event.stopPropagation()来避免一些副作用

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

就是我的解

尽管雷诺给出了一个很好的解决方案

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

我个人发现在某些情况下还需要$event.stopPropagation()来避免一些副作用

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

就是我的解

我认为:

<a ng-click="do()">Click</a>

因为根据文档，你应该可以离开href，然后Angular会为你处理防止的默认值!

整个这个防止默认的事情一直困扰着我，所以我创建了一个JSFiddle 说明了Angular在何时何地阻止了默认。

JSFiddle使用的是Angular的a指令——所以应该是完全一样的。您可以在这里看到源代码:一个标记源代码

我希望这将有助于澄清一些。

我本想把这个文档发布到ngHref上，但因为我的名声，我不能。

如果你使用的是Angular 8或更高版本，你可以创建一个指令:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[preventDefault]'
})
export class PreventDefaultDirective {

  @HostListener("click", ["$event"])
  public onClick(event: any): void
  {
    console.log('click');
    debugger;
      event.preventDefault();
  }

}

在组件的锚标记上，你可以这样连接它:

  <a ngbDropdownToggle preventDefault class="nav-link dropdown-toggle" href="#" aria-expanded="false" aria-haspopup="true" id="nav-dropdown-2">Pages</a>

App Module应该有它的声明:

import { PreventDefaultDirective } from './shared/directives/preventdefault.directive';


@NgModule({
  declarations: [
    AppComponent,
    PreventDefaultDirective

我一直都是这么做的。效果好极了!

<a href ng-click="do()">Click</a>

你应该做的是，完全省略href属性。

如果你看一下a element指令(它是Angular核心的一部分)的源代码，它在第29 - 31行声明:

if (!element.attr(href)) {
    event.preventDefault();
}

这意味着Angular已经解决了没有href的链接问题。你仍然有唯一的问题是css问题。你仍然可以将指针样式应用于具有ng-clicks的锚点，例如:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

因此，你甚至可以通过用一种微妙的、不同的样式来标记真正的链接，从而使你的网站更容易访问。

编码快乐!