既然你在制作网页应用，为什么还需要链接呢?

把锚换成按钮!

<button ng-click="do()"></button>

如果你使用的是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属性的值退化(当js被关闭)，所以我不能使用空href属性(或“#”)，但上面的代码没有为我工作，因为我需要一个事件(e)变量。我创建了自己的指令:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

在HTML中:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

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

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

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

编码快乐!

你可以在$location的Html5Mode中禁用url重定向来实现这个目标。您可以在页面使用的特定控制器中定义它。 就像这样:

app.config(['$locationProvider'，函数($locationProvider) { 美元locationProvider.html5Mode ({ 启用:没错, rewriteLinks:假的, requireBase:假 })； }));