Javascript 将单击处理程序传递给角度组件“正确的方式”

假设我们有一个角度组件，它几乎是一个样式化的按钮，我们将在整个应用程序中使用它。向该组件传递单击处理程序的正确方法是什么？因为据我所知有两种方法

一,。 我们只需将其传递给组件的选择器，如下所示

<app-styled-button (click)="handleClick()"></app-styled-button>

然后

然后在样式化的按钮模板中

<button (click)="onClick()">
...
</button>

---

我已经做了一些基本的测试，两种方法似乎都很好，但是使用一种方法比使用另一种方法有什么好处吗？我的意思是，第一种方法使用的代码要少得多，但第二种方法似乎是正确的。然而，我对angular还是新手，所以我仍然在校准我的道德指南针：D

在第一种情况下，您听到的是组件上出现的单击事件，而不是按钮。这不是同一事件，事件参数将不相同

我建议您通过组件传递按钮单击事件。 在这种情况下，必须使用@Output而不是@Input来传递事件。请查看官方文件：

---

我创建了一个简单的示例：

有点让人困惑。您是否正在尝试将应用样式按钮组件中的按钮的单击事件传递给父组件？或者您正在尝试从父组件向应用程序样式的按钮组件传递单击事件？选项A需要@Output而不是@Input，如我的ASWARE中所述。应用程序样式的按钮应该是一个可重复使用的按钮，它可以在应用程序中的不同位置执行不同的操作，同时看起来或多或少是相同的。在一个地方它可以添加一个新用户，在另一个地方它可以添加一个新的评论。我想弄清楚的是，传递这些函数的最佳方式是什么，以便在单击此样式化按钮时执行这些函数。好的，在本例中，您希望将单击事件从按钮传递到父主机组件。请看一下我的答案，你说得对！然而，展示如何在代码中创建和使用它将是非常酷的。非常感谢。我添加了一个Stackblitz示例。

<app-styled-button onClick="handleClick()"></app-styled-button>

<button (click)="onClick()">
...
</button>