将点击处理程序传递给 angular 组件“正确的方式”

Question

假设我们有一个 angular 组件，它几乎是一个样式按钮，我们将在整个应用程序中使用它。 将点击处理程序传递给该组件的正确方法是什么？ 因为据我所知，有两种方法可以做到这一点。

1. 我们简单地将它传递给组件的选择器，就像这样

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

2. 我们使用

@Input() onClick

然后

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

然后在样式按钮模板中

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

我已经进行了一些基本测试，这两种方法似乎都可以正常工作，但是使用其中一种方法有什么好处吗？ 我的意思是第一个选项使用的代码要少得多，但第二个选项感觉像是正确的方法。 然而，我是 angular 的新手，所以我仍在校准我的道德指南针：D

Answer 1

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

我建议您通过您的组件传递按钮单击事件。 在这种情况下，您必须使用@Output而不是@Input来传递事件。 请看官方文档： https://angular.io/guide/component-interaction#parent-listens-for-child-event