点击以锚定标签以固定角度

Question

我正在尝试将click事件附加到锚定标记（来自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);
    });  
}

这会将事件附加到所有元素，如何将其限制为仅锚标记？

[所有帮助表示赞赏。

Answer 1

您可以通过以下单击事件使用routerLink（对于角度2+，它是routerLink的替代项），以防止重新加载页面

href

Answer 2

我认为您不是让Angular为您服务。

角度2：

1. 从<a [routerLink]="" (click)="onGoToPage2()">Go to page 2</a> 中删除href标签以防止页面转发。
2. 然后只需添加通常的Angular click属性和功能。
3. 添加到<a>以使其像按钮一样操作

Answer 3

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

Answer 4

false

Answer 5

我已经可以通过简单地使用<a href="#" (click)="onGoToPage2()">Go to page 2</a> 来使其工作。引号内的方括号很重要。无需阻止方法中的默认操作或任何其他操作。这似乎类似于“！”方法，但无需在方法的开头添加不清楚的语法。

所以您的完整锚标记看起来像这样：

[routerLink]="[]"

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

Answer 6

您可以尝试这样的事情：

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

OR

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

Answer 7

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

Answer 8

我在Angular 5中遇到了此问题，该问题仍然遵循该链接。解决方案是让函数返回<a href="javascript:void(0);" (click)="onGoToPage2()">Go to Page 2</a>，以防止刷新页面：

html

false

ts

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

Answer 9

我在重新加载页面时遇到问题，但是使用

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

可以避免这种情况：

routerlink="."

我从Angular Material文档上的按钮获得了灵感：<a routerLink="." (click)="myFunction()">My Function</a>

Answer 10

我能够成功实现此目的

https://material.angular.io/components/button/examples

Answer 11

您可以使用<a [routerLink]="['/login']">abc</a> 替代角度2的routerLink。**使用href，如下所示[html

routerLink

并确保您在这样的modules.ts或router.ts中注册<a routerLink="/dashboard">My Link</a>

routerLink

Answer 12

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

此解决方案将：

• 使用适当的'a'样式设置链接样式。
• 调用所需的功能。

• 不导航至

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

  链接

Answer 13

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

Step-1：在HTML页面的锚标记中添加（click）事件，并删除href =“”，因为Angular不支持它，而是使用< [routerLink =“”

http://mySite/#

Step-2：

调用上述函数以attach click事件以锚定.ts文件中的标记（来自ajax），

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

就这些。它按预期工作。我创建了下面的示例，您可以看一下：-
  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");
   }