如何在angular 2 / type脚本中使用href调用函数

Posted 2023-03-13

【中文标题】如何在angular 2 / type脚本中使用href调用函数

【英文标题】：How to call a function using href in angular 2/ type script

【发布时间】：2018-04-10 12:16:53

【问题描述】：

我想使用 href 从 <a> 标签调用类型脚本组件中的函数，如下所示：

  <a href="fun()" ></a>

以某种方式可能吗？请注意，我只需要这种方式。在我的情况下，使用 click 事件没有帮助。

我已经试过了：

<a href="javascript:fun()"> 

但它不起作用。

谢谢！

【问题讨论】：

不，你需要点击事件，否则使用 vanila javascript

【参考方案1】：

你不能在href中调用函数使用role属性并将<a>作为按钮并使用(click)调用函数

<a role="button" (click)="func()"></a>

【讨论】：

当我使用这种语法时，我的链接样式没有应用。例如：a:active、a:hover、a:focus 我尝试添加一个 href="#"。应用了链接样式，但单击链接会将我带到 root/#，这显然不是我想要的。有没有办法让您的解决方案与应用的样式一起工作？

工作正常。它应该是公认的答案。

【参考方案2】：

我在解决类似问题时注意到的一点是，您可以用 将函数调用包围起来，让 Angular 实际调用该函数。

<a href="javascript:fun()"> </a>

在我的特定问题中，我试图根据其他信息生成动态链接，所以我做了类似的事情

html:

<a href="generateCustomLink(data)" target="_blank"></a>

打字稿：

generateCustomLink(data: any) : string 
    return 'http://www.google.com';

【参考方案3】：

我知道这是一个老问题。这在 Angular 6 上对我有用 -

<a href="javascript:void(0);" (click)="getSampleCSV()">CSV Template</a>

【讨论】：

它对我有用，谢谢

【参考方案4】：

对于新访客，您也可以像下面这样调用：

在 mycomponent.component.html 中

 <a class="dropdown-item" (click)="onLogoutClick()">Logout</a>

并且，在 mycomponent.component.ts 中

  onLogoutClick() 
    console.log("Logout Clicked");
    //define your logic