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

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

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

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

就是我的解

如果你使用的是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

我在使用锚进行角引导下拉时遇到了同样的问题。我发现唯一的解决方案，避免不必要的副作用(即。因为使用preventDefault())而没有关闭的下拉列表使用以下方法:

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

你可以将$event对象传递给你的方法，并在它上面调用$event. preventdefault()，这样默认的处理就不会发生:

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

// then in your controller.do($event) method
$event.preventDefault()

对于这类事情，我更喜欢使用指令。这里有一个例子

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

eat-click的指令代码:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

现在，您可以将eat-click属性添加到任何元素，它将自动获得preventDefault()。

好处:

您不必将丑陋的$event对象传递到do()函数中。 你的控制器更具有单元可测试性，因为它不需要去掉$event对象

您可以执行以下操作

1.从锚(a)标签中删除href属性

2.将css中的指针指针设置为ng click元素

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }