logo标签列表

点击锚点元素后页面重新加载

javascripthtmlasp.netangular
6
我正在处理一个网络应用程序，它是一个传统的aspx（asp.net）Web Forms应用程序，但其中已经加入了一些Angular 6应用程序。
我的任务是修复一个bug，即在单击具有href="#"的锚元素时导致浏览器刷新。
我不确定是什么原因导致整个页面重新加载。
奇怪的是，当我在Chrome中打开开发工具，选择网络选项卡并选择禁用缓存时，页面只在第一次单击链接时刷新，任何后续单击都可以正常工作。这可能与第一次单击后浏览器URL现在包含“#”有关。
我知道这似乎有点随机，但我想知道是否有人对导致重新加载的原因有任何理论。
3
你尝试过从锚点中删除 href="#" 吗？ - Bunyamin Coskuner
1
你正在使用Angular路由吗？ - Giovan Cruz
1
最正确和最简单的解决方案是移除 href="#"。Angular 无法在所有情况下默认覆盖此值。 - Liam
可能是页面链接重新加载页面的重复问题。 - Liam
@TomMiller，你有一个问题，有7个不同的答案。这些答案都没有真正解决你的问题吗？ - Giovan Cruz
显示剩余2条评论
10个回答
7

没有看到代码很难确定是什么原因导致了这个问题。当我遇到这种情况时，最常用的解决方法是使用prevent default。你可以像这样做：

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

如果您已经有了一个点击事件，那么将$event作为参数传递给您的函数，然后在调用的函数中使用preventDefault。代码如下：
Html
<a href="#" (click)="someFunc($event)">

在你的ts文件中：

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

这个回答与问题有关，是谷歌搜索结果中排名最高的答案，希望对您有用。

我有一些使用常规锚点标签并指向我的Angular应用程序路由的外部Web组件。单击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 等。

你好Lee，我遇到了完全相同的问题。我正在使用一个外部库（jointjs），当我点击svg元素（href）内部时，我的应用程序会完全重新加载。我将尝试实现你的解决方法。但是你把它放在哪里了？ - Kubadev
@Kubadev - 你可以将它放在父组件上，即所有你想要监视的子组件之上。在我的情况下，我将其放在主根组件上。 - Lee Gunn
好的，谢谢！所以这是拦截joint.js的xLinkHref并将其转换为Angular路由器对象吗？因为实际上，这个解决方法仍然重新加载我的应用程序，并直接进入主页.. - Kubadev
@Kubadev - 在代码中插入断点并进行调试。听起来你可能需要稍微调整一下以适应你的情况。也许你需要通过将routerlink更改为其他内容来更改 firstAnchor.hasAttribute('routerlink')。 - Lee Gunn
@LeeGuun 使用 href = firstAnchor.getAttribute('xlink:href') 来获取 jointjs 矩形节点的 nodeValue。 - Kubadev
2
将您的a标签代码更改如下：

将您的a标签代码更改为以下内容

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

这将在不重新加载页面的情况下调用yourClickEvent();。
请查看此stackblitz stackblitz 以获取更多信息。最初的回答。
1
如果您不想重新加载页面，请使用 $event.preventDefault()。
<a href="#" (click)="$event.preventDefault()">
1
preventDefault()会停止执行。 - M.S.Udhaya Raj
1
尝试使用调试工具选择元素，然后单击事件监听器，再单击点击事件以查看正在侦听的内容。也许你可以通过这种方式追踪它。
你还可以将此内容直接粘贴到控制台中以触发断点，然后单击任何有问题的元素。
['unload', 'beforeunload'].forEach(function (evName) {
    window.addEventListener(evName, function () {
        debugger; // Chance to check everything right before the redirect occurs
    });
});

来源：当window.location改变时如何中断？

0

在编程中，使用[routerLink]代替href = ""，并使用点击事件调用您在typescript文件中的方法。

例如：

// 根据文件名下载文件

<a [routerLink]="'file://' + 'path'" (click)="downloadFile(templateDocument.fileName)">{{downloadDocuments.fileName}}</a>
0
0

使用 href="javascript:void(0);"

你想要这样做的原因是，通常情况下，javascript: URL 会将浏览器重定向到评估该 JavaScript 的结果的纯文本版本。但是，如果结果未定义，则浏览器将停留在同一页上。void(0) 只是一个简短而简单的脚本，它的计算结果为 undefined。

0
在我的情况下，根本原因是一个 <base> 元素。显然，以 # 开头的链接也会被重写为相对于基本 URL，因此点击其中一个链接将触发页面导航。
-2

既然您提到了 Web 应用程序是 asp.net webforms，那么能否请您告诉我们：

  1. 链接是否为 asp.net 超链接控件。如果是这样的话，AutoEventWireUp 可能会导致链接被自动提交：请查看 this 链接

  2. 如果页面上有 asp.net 服务器控件，则可以通过设置

    @Page AutoEventWireup="false"

    1. 可以在 web.config 中设置来禁用整个项目：
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接