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

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

如果仍然相关:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

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

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

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

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

你应该做的是，完全省略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;
}

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

编码快乐!

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

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