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（角度为2+的href的替代方法），点击事件如下，以防止重新加载页面

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

Answer 2

我认为你不会让Angular为你工作。

角度2：

从const orderList = listArry.sort( (a,b)=> a.date < b.date }; return orderList.pop();中删除href代码，以防止转发页面。
然后只需添加您常用的Angular点击属性和功能。
添加到<a>以使其像按钮一样

Answer 3

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

Answer 4

您只需要在点击方法处理程序调用{{1}}之前添加!!。 (click)="!!onGoToPage2()"通过将方法的返回值转换为布尔值来防止发生默认操作。如果它是!!方法，那么它将变为void。

Answer 5

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

Answer 6

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

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

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

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

Answer 7

您可以尝试以下操作：

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

OR

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

Answer 8

您可以使用routerLink替代href角度2。** 在html中使用routerLink，如下所示

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

并确保在modules.ts或router.ts中注册routerLink

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

Answer 9

I was able to implement this successfully

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

Answer 10

我必须结合几个答案才能找到有效的解决方案。

此解决方案将：

使用适当的＆＃39; a＆＃39;来设置链接的样式。样式。
调用所需的功能。
不导航至http://mySite/#

＆lt; a href =＆＃34;＃＆＃34; （点击）=＆＃34; !! functionToCall（）＆＃34;＆GT; LINK＆LT; / A＆GT;

Answer 11

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

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

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

Answer 12

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

步骤-1：在HTML页面的定位标记中添加（单击）事件，然后将 href =“” 删除为Angular不支持它，而是使用 routerLink =“”

/!(^\s*$)/

步骤-2：调用上述函数以附加点击事件，以将标记（来自ajax）固定在.ts文件中，

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

仅此而已。它按预期工作。我创建了下面的示例，您可以看一下：-

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

Answer 13

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

html

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

ts

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

在angular2中附加click到锚标记

13 个答案:

html

ts