Angular 2，使用 href='#' 处理锚链接答案

【问题标题】：Angular 2, handle anchor links with href='#'Angular 2，使用 href='#' 处理锚链接
【发布时间】：2017-09-02 16:07:03
【问题描述】：

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

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

匹配，我应该如何处理这些锚链接，以便带有href='#' 的锚留在同一页面上，即什么也不做。

示例锚标记

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

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

【问题讨论】：

href="#" 到底有什么意义？还是你的意思是href="#something"？
@zeroflagL 只是假设我有一些未定义 href 的链接，例如隐私页面，所以我保留了它#，所以单击此链接不会发生任何事情，而是它重定向到登录页面

标签： angular

【解决方案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

就我个人而言，我喜欢这个解决方案，因为它是全局且有角度的。这是stackblitz example。

选项 2

您可以同时使用 css 并放弃 href 属性：

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

那么您的非活动链接将是：

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

选项 3

CSSpointer-events:

a.noop {
   pointer-events: none;
}

用法

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

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

【讨论】：

我已经考虑了原始来源中的选项1，但它不起作用，您可以尝试制作一个plunker

【解决方案2】：

试试这个

href='javascript:void(0);'

【讨论】：

@promod 我有多个锚链接，我不会用这个替换所有的，我也想以通用的集中方式处理这个

【解决方案3】：

由于添加这个功能比较棘手，建议大家不要重复造轮子，看看ng2-page-scroll。

如果您想了解更多信息，请阅读Router & Navigation Guide。

【讨论】：

我没有让页面滚动，问题在于任何未定义链接的点击。
在这种情况下，您不能使用锚链接。如果您需要在点击时触发某些内容，则必须使用click event。当你使用 Angular 构建一些东西时，你需要记住你不是在创建一个简单的 html 静态页面。

【解决方案4】：

示例方法可以是添加这段代码 event.preventDefault();在你的事件函数里面..

如

函数 fn(事件) { event.preventDefault(); ...
}

【讨论】：