在Angular中将点击事件绑定到锚点标签

Question

我试图为来自ajax的锚标签附加点击事件并阻止默认重定向。在Angular中我该如何做？

我想在Angular中为来自ajax的锚标签添加点击事件，并阻止默认的重定向。有什么方法可以做到吗？

<ul>
    <li><a href="/abc"><p>abc</p></a></li>
    <li><a href="/abc1"><p>abc1</p></a></li>
    <li><a href="/abc2"><p>abc2</p></a></li>
    <li><a href="/abc3"><p>abc3</p></a></li>
</ul>

在 ts 文件中：

constructor(elementRef: ElementRef, renderer: Renderer) { 
    this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
        event.preventDefault();
        let target = event.target || event.srcElement || event.currentTarget;
        console.log(target);
    });  
}

这将为所有元素附加事件，我如何将其限制为仅适用于锚标签？

感谢所有帮助。

- user407283

---

您可以使用 event.target.nodeName 来确定点击事件发生在哪个 HTML 标签上。 - ranakrunal9

可以使用(click)='fn'。 - Jai

@jai 谢谢，我无法操作 AJAX 响应，必须从 TS 文件中处理它。 - user407283

看起来你需要操作获取到的JSON。将其解析为对象；添加或更新属性，然后将更新后的JSON分配给目标；也许这会给你一些提示：https://dev59.com/BWoy5IYBdhLWcg3wN7YX - Karl

你能解释一下如何通过ajax获取HTML并将其插入到页面中吗？AHAH（AJAX HTML）曾经非常流行，即使在Angularjs 1.x时代，许多模板也是在服务器端渲染的。但是我没有看到任何现代Angular或React使用AHAH的情况。 - Martin

Answer 1

你可以使用routerLink（这是 Angular 2+ 的 href 的替代品）与以下点击事件一起使用，以防止页面重新加载。

<a [routerLink]="" (click)="onGoToPage2()">Go to page</a>

- Vicky

---

[routerLink] 用于内部网址。如果我们想要将用户发送到外部网址并同时监视点击事件，该怎么办？ - Marzieh Bahri

你可以在HTML中使用相同的代码，在component.ts文件中使用onGoToPage2() { window.location.href='http://www.cnn.com/'; //use the external url here }这样，你就可以观察到点击事件了。 - Vicky

似乎需要在routerLink周围加上方括号，这样才能按预期进行操作（如果没有它们，它会像正常情况下导航到/）。 - Neofish

在Angular 7中完美运作。 - Jette

当你的路由有查询参数时，这种方法会彻底失败。我会为你省去翻滚的麻烦，请继续使用 href="javascript:void(0)"。 - Stavm

Answer 2

我认为你没有让Angular对你发挥作用。

在Angular 2中：

1. 从<a>标签中移除href属性，以防止页面跳转。
2. 然后只需添加通常的Angular点击属性和函数。
3. 添加style: "cursor: pointer"，使它像按钮一样操作。

- PatrickW

---

但这并不意味着它表现得像一个链接。它只是看起来像普通段落文本。 - Neutrino

你可以使用CSS控制外观。你想让链接看起来像什么？ - PatrickW

我需要一个链接，但我不想手动设置样式使其看起来像链接，因为它本来就应该是一个链接。 - Neutrino

在 HTML 中添加样式时，使用等号，例如 style="cursor: pointer;"。 - Mike Poole

一个拥有相应实现的点击监听器并不同于一个 href。比如说，你不能用它来打开一个新的标签页。请不要用点击监听器替换所有链接 - 这样会让互联网变得更糟糕。请记住保持原意，使语言更加通俗易懂。 - Patrick Kelleter

这真的是一种糟糕的方式，因为它没有考虑到可访问性。链接无法获得焦点。 - Sebi2020

Answer 3

我能够通过简单地使用[routerLink]="[]"来使其工作。引号内的方括号很重要。无需在方法中防止默认操作。这似乎类似于“!!”方法，但不需要在方法开头添加不清晰的语法。

所以你完整的锚点标签将如下所示:

<a [routerLink]="[]" (click)="clickMethod()">Your Link</a>

请确保您的方法正确运行，否则可能会导致刷新页面，这会让人很困惑，很难确定实际上出了什么问题！

- BlueCaret

---

这是最有用的答案。它解决了我的问题。 - Germstorm

Answer 4

你只需要在点击方法处理程序调用之前加上!!： (click)="!!onGoToPage2()"。 !!将通过将方法的返回值转换为布尔值来防止默认操作发生。如果是一个void方法，那么这将变成false。

- Andrew Landsverk

---

我曾经吃过亏，滥用这个功能会导致长期给其他开发人员带来极其混乱的错误。当你的onGoToPage2函数出现问题时，锚点会自动将你重定向到主页，这完全没有任何意义……在函数开头使用$event.preventDefault()会产生更加一致的崩溃，方便其他开发人员进行解决。 - Ziul

这真的是一种糟糕的方式，因为它没有考虑到可访问性。该链接无法聚焦。 - Sebi2020

Answer 5

我曾经遇到页面重新加载的问题，但通过routerlink="."成功避免了这个问题：

<a routerLink="." (click)="myFunction()">My Function</a>

我从Angular Material文档中的按钮部分获得了灵感： https://material.angular.io/components/button/examples

更新 自从Angular 12开始，我已经开始使用routerLink=""。我发现routerLink="."会将我导航到父页面。

- Mike Dalrymple

Answer 6

<a href="#" (click)="onGoToPage2()">Go to page 2</a>

- Neutrino

---

重新加载页面时，有没有办法只对 a 标签应用单击事件？ - Abhijit Jagtap

是的，你只需要在点击调用之前添加 !! ：(click)="!!onGoToPage2()"。 - Andrew Landsverk

你也可以尝试<a href (click)="onGoToPage2()">转到第2页</a>。 - user1131926

@AndrewLandsverk，你应该将你的评论提升为一个答案。 - Aleksander Rezen

谢谢 @argoden！已经转换完成。 - Andrew Landsverk

Answer 7

你可以尝试像这样做：

<a href="javascript: void(0);" (click)="method()">

或者

<a href="javascript: void(0);" [routerLink]="['/abc']">

- Gaspar

Answer 8

转到第二页

- aungye

---

这个问题是一年前提出的。原帖作者可能不再遇到同样的问题，因此新的回答应该尽可能提供更多细节，以展示回答如何帮助其他遇到相同问题的人。这个回答更像是一条评论而不是一个完整、研究并解释清楚的答案。 - Claies

Answer 9

我在使用Angular 5时遇到了这个问题，它仍然会跟随链接而刷新页面。解决方法是让函数返回false以防止页面被刷新：

HTML

<a href="" (click)="openChangePasswordForm()">Change expired password</a>

ts

openChangePasswordForm(): boolean {
  console.log("openChangePasswordForm called!");
  return false;
}

- Alexei - check Codidact

---

所以它仍然将函数的返回值视为...不像在原始的JS onClick="return function()"中那样清晰... - rubmz

Answer 10

处理锚点标签和href并保持锚点样式的简洁方法：

HTML：

在click事件中传入$event。

<a href (click)="doSomething($event)">Do something</a>

Typescript：

获取事件作为MouseEvent并调用e.preventDefault()。

doSomething(e: MouseEvent): void {
    e.preventDefault();

    //Do something
}

您的样式将保持完整，浏览器不会进行默认的锚点处理。

- Pierre