将点击附加到角度锚标记答案

【问题标题】：Attaching click to anchor tag in angular将点击附加到角度锚标记
【发布时间】：2017-01-04 07:58:12
【问题描述】：

我正在尝试将点击事件附加到锚标记（来自 ajax）并阻止默认重定向。我怎么能在 angular 中做到这一点？

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

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

感谢所有帮助。

【问题讨论】：

您可以使用event.target.nodeName 了解触发了哪个 HTML 标记。
(click)='fn'可以用。
@jai 谢谢我无法操纵 ajax 响应我必须从 ts 文件处理它
看来你必须操纵你得到的 JSON。将其解析为对象；添加或更新属性，然后将更新的 JSON 分配给目标；也许这会给你一个提示：stackoverflow.com/questions/8702474/…
您能解释一下您是如何从 ajax 获取此 HTML 并将其插入到页面中的吗？ AHAH (AJAX HTML) 曾经非常流行，即使在 Angularjs 1.x 中，许多模板也是在服务器端呈现的。只是还没有看到在现代 Angular 或 React 中使用 AHAH。

标签： angular anchor mouseclick-event

【解决方案1】：

您可以使用routerLink（这是href 用于角度2+的替代品）与点击事件如下，以防止页面重新加载

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

【讨论】：

[routerLink] 用于内部 URL。如果我们想将用户发送到外部 url 并同时观看点击事件怎么办？
您可以在 HTML 中使用相同的上述代码，在 component.ts 文件中使用 onGoToPage2() { window.location.href='http://www.cnn.com/'; //use the external url here }，这样您也可以观看点击事件。
似乎需要 routerLink 周围的方括号才能按需要工作（没有它们，它会正常导航到 /）。
在 Angular 7 中完美运行
@emirhosseini 您是否明确将其用作[routerLink] 而不是routerLink？那让我绊倒了。

【解决方案2】：

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

角度 2：

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

【讨论】：

但这并不能使它像链接一样呈现。它看起来就像普通的段落文本。
您可以使用 CSS 控制外观。你希望你的链接是什么样的？
一个链接，我宁愿不必为了让链接看起来像一个链接而乱用手动样式，无论如何它都应该这样做。
向 HTML 添加样式时，您使用等号，例如style="cursor: pointer;"
具有相应实现的点击监听器与href不同。例如，你不能用它打开一个新标签。请不要用点击侦听器替换这个世界上的所有链接——这样你会让网络变得更糟。

【解决方案3】：

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

【讨论】：

我学到了从长远来看滥用它会给其他开发人员带来非常混乱的错误。当您的 onGoToPage2 函数中的某些内容崩溃时，锚会自动将您重定向到您的主页，这没有任何意义......在开始时使用 $event.preventDefault() 将产生更一致的崩溃，以便其他开发人员弄清楚。

【解决方案4】：

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

【讨论】：

但是#重新加载页面，有没有办法只在href标签上应用点击事件
是的，您只需在点击调用前添加!!：(click)="!!onGoToPage2()"
你也可以试试转到第2页
@AndrewLandsverk 您应该将您的评论推广到 asnwer
谢谢@argoden！它已被转换。

【解决方案5】：

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

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

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

只要确保您的方法正常工作，否则您可能最终会刷新页面，而实际上是什么错误会让人非常困惑！

【讨论】：

【解决方案6】：

你可以试试这样的：

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

或

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

【讨论】：

【解决方案7】：

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

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

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

更新我从 Angular 12 开始使用 routerLink=""。我发现 routerLink="." 正在将我路由到父页面。

【讨论】：

【解决方案8】：

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

【讨论】：

这个问题是一年多以前提出的。原始海报不太可能仍然存在同样的问题，因此新的答案应该努力提供尽可能多的细节，以显示答案如何帮助遇到同样问题的其他人。这个答案更像是一个评论，而不是一个完整的、经过研究的、解释过的答案。

【解决方案9】：

我能够成功实现这一点

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

【讨论】：

【解决方案10】：

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

此解决方案将：

使用适当的“a”样式为链接设置样式。
调用所需的函数。
不导航到http://mySite/#

链接

【讨论】：

这仍在为我重新加载页面
而且你不能在没有 href 的情况下编写它。否则它不会为我提供锚标记链接所需的 css。
你可以拥有没有任何值的 href 属性，这个解决方案应该可以工作

【解决方案11】：

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

html

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

ts

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

【讨论】：

所以它仍然认为函数的返回值......不像香草JS中那样清楚 onClick="return function()" ...

【解决方案12】：

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

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

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

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

【讨论】：

【解决方案13】：

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

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

【讨论】：