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

【问题标题】：How to call a function using href in angular 2/ type script如何在angular 2 / type脚本中使用href调用函数
【发布时间】：2018-04-10 12:16:53
【问题描述】：

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

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

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

我已经试过了：

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

但它不起作用。

谢谢！

【问题讨论】：

【解决方案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
  }

【讨论】：