如何使用Angular 5在单击按钮时调用多个方法？

Posted 2023-03-13

【中文标题】如何使用Angular 5在单击按钮时调用多个方法？

【英文标题】：How to call multiple methods on a button click using Angular 5?

【发布时间】：2018-06-27 07:17:37

【问题描述】：

我正在使用 Angular 5 并遇到问题。我想提交（点击）事件并一个接一个地调用两个或多个方法。请给我想法或解决方案，以便我可以提交（点击）事件并调用两个或多个方法。

如

.html 文件

   <button (click)="abc(); bcde()"></button>

.ts 文件

  first method  
  abc()

  second method method
  bcde()

这是正确的方法吗？请建议我并帮助我解决这个问题

【问题讨论】：

您面临什么问题？什么错误？

您可以像这样abc() this.bcde();this.cdef();abd() 调用其他methods

你能告诉我调用多个方法的正确方法吗。我是 Angular 5 的新手

我在rest api调用时遇到了这个问题，直到我找到这篇文章他们才会按顺序调用：***.com/a/45737338/1178375

【参考方案1】：

你也可以

<button (click)="[abc(), bcde()]"></button>

【参考方案2】：

<button (click)="callall()"></button>

创建一个函数并调用其中的所有函数

功能1

abc()

功能2

bcde()

在通用函数中调用两者

 callall()

        this.abc()
        this.bcde() 

【讨论】：

这是一个最好避免使用 raihan 的用例，正如其他人已经指出的那样。最好有一个你调用的方法，然后从那里调用你想要的其他方法。

为什么要避免这个用例？一次点击可能会触发两个不同的操作，明确说明这一点也不错。

我同意这是一个不好的做法！它们应该单独调用，以避免出现多个代码异味和坑。

【参考方案3】：

这是我猜的正确方法。它对我有用。

<button (click)="abc(); bcde()"></button>

【讨论】：

我在 AngularDart 中尝试过这种方法，但没有奏效。我必须创建一个调用其他两个函数的新函数。

哇，这是一个很好的输入，很高兴知道@Pi