在angular2中附加click到锚标记

Question

我试图将click事件附加到锚标签(来自ajax)并阻止默认重定向.我怎么能在棱角2？

<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);

        });


    }

这会将事件附加到所有元素,我如何才能将其限制为锚标记

所有人都很感激

Answer 1

您可以使用routerLink(href如下角度2+ 的替代方法)点击事件,如下所示,以防止页面重新加载

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

Answer 2

我想你不会让Angular为你工作.

在角度2:

1. href从中删除标记<a>以防止页面转发.
2. 然后只需添加您常用的Angular点击属性和功能.
3. 添加到style: "cursor: pointer"使其像一个按钮

Answer 3

您只需要!!在click方法处理程序调用之前添加:(click)="!!onGoToPage2()".通过!!将方法的返回值转换为布尔值,将阻止发生默认操作.如果这是一种void方法,那么这将成为false.

Answer 4

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

Answer 5

我在重新加载页面时遇到了问题，但可以通过以下方式避免这种情况routerlink="."：

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

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

Answer 6

您可以尝试如下操作：

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

要么

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

Answer 7

我在 Angular 5 中遇到了这个问题，仍然遵循链接。解决方案是让函数返回false以防止刷新页面：

html

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

ts

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

Answer 8

<a href="javascript:void(0);" (click)="onGoToPage2()">Go to Page 2</a>

Answer 9

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

因此，您的完整锚标记将如下所示：

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

只需确保您的方法正确运行，否则您可能最终刷新页面，这会使真正的错误变得非常混乱！