Передача обработчика кликов в компонент 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>

Я провел некоторое базовое тестирование c, и он похоже, отлично работает с обоими подходами, но есть ли преимущества от использования одного над другим? Я имею в виду, что в первом варианте используется гораздо меньше кода, но во втором кажется, что - это правильный способ сделать это. Однако я новичок в angular, поэтому я все еще калибрую свой моральный компас: D

Answer 1

В вашем первом случае вы слушаете событие щелчка, возникшее на вашем компоненте, а не на кнопку. Это не одно и то же событие, параметры события не будут такими же.

Я предлагаю вам передать событие нажатия кнопки через ваш компонент. В этом случае вы должны использовать @Output вместо @Input для передачи события. Взгляните на официальную документацию: https://angular.io/guide/component-interaction#parent -listens-for-child-event

Я создал простой пример: https://stackblitz.com/edit/angular-tps7zk