Question

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

1。我们只需像这样将其传递给组件的选择器

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

2。我们使用

@Input() onClick

然后

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

，然后在样式按钮模板中

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

我已经进行了一些基本测试，并且似乎两种方法都可以正常工作，但是使用一种方法与其他方法相比有什么好处吗？我的意思是第一个选项使用的代码少得多，但是第二个选项却使感觉喜欢正确的方法。但是，我对角度不熟悉，因此仍在校准道德指南针：D

Answer 1

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

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