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

Question

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

107

我试图为来自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

1

您可以使用 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

16个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Francisco d'Anconia · Answer 1

我不得不结合几个答案才得到一个可行的解决方案。

这个解决方案将会：

使用适当的'a'样式来设置链接样式。
调用所需的函数。
不跳转到http://mySite/#

<a href="#" (click)="!!functionToCall()">链接</a>

- Jaimin Patel · Answer 2

我成功地实现了这个功能。

<a [routerLink]="['/login']">abc</a>

- Samim Ahmed · Answer 3

您可以在Angular 2中使用routerLink代替href。** 在HTML中使用如下代码：routerLink

<a routerLink="/dashboard">My Link</a>

确保像这样在 modules.ts 或 router.ts 中注册您的 routerLink

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent }
]

- Mario B · Answer 4

虽然这个问题已经得到了技术上的回答，但我认为所有的回答都忽略了一些重要的事情：仅仅添加一个点击处理程序是不够的。你还希望链接对于只使用键盘进行辅助功能的人来说也是可用的。通常，这意味着在聚焦元素时按Enter键应该与单击它具有相同的效果。顺便说一下，我们还可以设置role。如果链接实际上用作按钮，我们应该设置role="button" - 这样屏幕阅读器将把它作为按钮而不是导航链接进行通告。对于原始问题：几乎所有的答案在我这里都有效，但我选择了空routerLink的那个 - 我认为这使得语义上清晰地表明不需要导航。其他解决方案可能会在以后引起混淆（比如说，有人在一年后阅读你的代码）。

<a [routerLink]="" (click)="doSomething()" (keyup.enter)="doSomething()" role="button" tabindex="0">your link</a>

- Mohammad Zaid Pathan · Answer 5

这对我有用：

<a class="btn-link" (click)="clickedFunction()">Click me</a>

- Naheed Shareef · Answer 6

我已经检查了所有上面的答案，我们只需要实现两件事就可以按预期工作。

步骤 - 1：在HTML页面中的锚标签中添加(click)事件并删除href=" "，因为它明确用于导航到外部链接，而应使用routerLink = " "来帮助导航视图。

<ul>
  <li><a routerLink="" (click)="hitAnchor1($event)"><p>Click One</p></a></li>
  <li><a routerLink="" (click)="hitAnchor2($event)"><p>Click Two</p></a></li>
</ul>

步骤二：在.ts文件中调用上述函数，将点击事件附加到来自ajax的锚标签。

  hitAnchor1(e){
      console.log("Events", e);
      alert("You have clicked the anchor-1 tag");
   }
  hitAnchor2(e){
      console.log("Events", e);
      alert("You have clicked the anchor-2 tag");
   }

就是这样。它按预期工作。我创建了下面的示例，你可以看一下：

https://stackblitz.com/edit/angular-yn6q6t