Angular 2,用href ='#'处理锚链接

Question

单击任何具有href='#'Angular路由器路径的锚链接时

{ path: '', component: NologinComponent, pathMatch: 'full' }

是匹配的,我应该如何处理这些锚链接,以便锚定href='#'在同一页面上,即什么都不做.

示例锚标记

<a class="title-logo" href="#"><img src="/Content/Images/Image1.png"></a>

还有一点需要考虑,我已经<base href="/" />在布局页面中使用了 这一点,以便刷新角度保持在当前页面上并从"/"查找资源而不是从当前组件内部查找.

Answer 1

有几个选择:

选项1:

href使用指令覆盖属性:

@Directive({
  selector : '[href]'
})
export class MyLinkDirective {
  @Input() href: string;

  @HostListener('click', ['$event'])
  noop(event: MouseEvent) {
    if(this.href.length === 0 || this.href === '#') {
      event.preventDefault();
    }
  }
}

资源

就个人而言,我喜欢这个解决方案,因为它是全球性和有角度的 这是一个stackblitz示例.

选项2

您可以使用css并将href所有属性放在一起:

a {
  cursor: pointer;
  user-select: none;
}

那么你的非活动链接将是:

<a class="title-logo"><img src="/Content/Images/Image1.png"></a>

选项3

CSS pointer-events:

a.noop {
   pointer-events: none;
}

用法

<a class="title-logo noop" href="#"><img src="/Content/Images/Image1.png"></a>

pointer-events如果您关心它们,可能会对某些(特别是旧版本)浏览器造成麻烦.您可以在此处查看兼容性列表.

Answer 2

尝试这个

href='javascript:void(0);'