Question

我正在开发一个Web应用程序，它是一个传统的aspx（asp.net）Web表单应用程序，但是其中集成了一些有角度的6个应用程序。

我的任务是修复一个错误，该错误会导致在单击带有href =“＃”的锚点元素时刷新浏览器。

我不确定是什么原因导致整个页面重新加载。

奇怪的是，当我在Chrome中打开开发工具时，选择“网络”标签，然后选择“禁用缓存”，只有当我第一次单击链接时，页面才会刷新，而其他所有后续单击都可以正常工作。这可能与以下事实有关：我第一次单击该浏览器后，浏览器URL现在在其末尾包含＃。

我知道这似乎有点随机，但我想知道是否有人首先对导致重新加载的原因有任何理论。

Answer 1

尝试使用调试工具选择元素，然后单击“事件侦听器”，然后单击“ Click”事件以查看正在侦听的内容。也许您可以通过这种方式进行跟踪。

您也可以将其简单地粘贴到控制台中以触发中断，然后单击任何有问题的元素：

['unload', 'beforeunload'].forEach(function (evName) {
    window.addEventListener(evName, function () {
        debugger; // Chance to check everything right before the redirect occurs
    });
});

来源：Break when window.location changes?

Answer 2

此答案与问题有关，它是Google提出的第一个答案，我希望这是有用的。

我有一些外部Web组件，它们使用带有href的常规锚点标记指向我的角度应用程序中的路由。单击href导致重新加载整个页面。这是因为我没有使用routerLink-但是，就我而言，我不能。

所以，我的解决方法是：

  @HostListener('window:click', ['$event'])
  onClick(e: any) {
    const path = e.composedPath() as Array<any>;
    const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
    if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
      const href = firstAnchor.getAttribute('href');

      this.router.navigateByUrl(href);

      e.preventDefault();
    }
  }

根据您的应用程序，您可能需要进行其他一些检查，例如是目标_blank，还是外部url等。

Answer 3

如果您不想重新加载页面，请使用$ event.preventDefault（）

<a href="#" (click)="$event.preventDefault()">

Answer 4

如下更改标签代码

<a href="javascript:void(0);" (click)="yourClickEvent();">A Tag</a>

这将调用yourClickEvent（）;没有页面重新加载

在这里stackblitz

Answer 5

在使用角度路线时，请尝试使用以下表示法： <a [routerLink]="['./']" fragment="Test">

正如此评论所解释：https://stackoverflow.com/a/38159597/4916355

Answer 6

use href =“ javascript：void（0）;”

之所以要使用链接的href来执行此操作，是因为通常情况下，javascript：URL会将浏览器重定向到评估该JavaScript的纯文本版本。但是，如果结果不确定，则浏览器将停留在同一页面上。 void（0）只是一个简短且简单的脚本，其结果为未定义。

Answer 7

在不查看任何代码的情况下很难说出是什么原因造成的。遇到这种情况时，我使用的最常见的解决方案是默认阻止。您可以做类似

的操作

<a href="#" (click)="$event.preventDefault()">

或者，如果您已经具有click事件，则将$ event作为参数传递给函数，然后在所调用的函数中将preventDefault传递给函数。看起来像：

HTML

<a href="#" (click)="someFunc($event)">

和您的ts中：

someFunc(event) {
    event.preventDefault();
    // rest of your code here
}

Answer 8

由于您提到的Web应用是asp.net Webforms，请告诉我们

链接是否为asp.net超链接控件。如果是这样的话， AutoEventWireUp可能导致链接自动提交：请查看this链接
如果页面上确实有asp.net服务器控件，则可以通过设置
来禁用
@Page AutoEventWireup =“ false”
1. 对于整个项目，可以通过在web.config中进行设置来禁用它：

单击锚元素

8 个答案: