Angular 2，使用 href ='#' 处理 anchor 链接

Question

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

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

匹配，我应该如何处理这些 anchor 链接，以便锚定为 href='#'停留在同一页面上，即什么都不做。

示例 anchor 标记

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

还有一点需要考虑，我使用了 <base href="/" />在布局页面中，以便在刷新时 Angular 停留在当前页面上，并从“/”而不是从当前组件内部查找资源。

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

Source

就我个人而言，我喜欢这个解决方案，因为它是全局的和 Angular 。这是一个 stackblitz example .

---

选项 2

您可以同时使用 css 和抛弃 href 属性:

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

那么您的非事件链接将是:

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

---

选项 3

CSS 指针事件:

a.noop {
   pointer-events: none;
}

用法

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

pointer-events 可能会在某些(尤其是较旧的)浏览器上引起问题，如果您关心的话。可以看到兼容性列表here .