假设我有一个锚标记,比如

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

如何防止浏览器在AngularJS中导航到# ?


当前回答

如果你使用的是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 ng-click="myFunction()">Click Here</a>

然后更新你的css有一个额外的规则:

a[ng-click]{
    cursor: pointer;
}

它更简单,提供完全相同的功能,效率更高。希望这对将来寻找这个解决方案的人有所帮助。


以下是我之前的解决方案,我把它放在这里只是为了遗留的目的:

如果你经常遇到这个问题,一个简单的指令可以解决这个问题:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

它检查所有锚标记(<a></a>),看看它们的href属性是否为空字符串("")或散列('#'),或者存在ng-click赋值。如果发现其中任何一种情况,它将捕获事件并防止默认行为。

唯一的缺点是它为所有锚标记运行这个指令。因此,如果页面上有很多锚标记,而你只想阻止其中一小部分的默认行为,那么这个指令就不是很有效。然而,我几乎总是想要preventDefault,所以我在我的AngularJS应用程序中都使用这个指令。

另一种可能是:

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

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

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

避免href上的事件最安全的方法是将其定义为

<a href="javascript:void(0)" ....>

在我的例子中,Angular: 10 -工作

  <a [routerLink]="" (click)="myFunc()"> Click me </a>

更新:此方法将重新加载解析器。由于@Meeker