Angular источник событий против прослушивателя кликов

Question

Я изучаю angular через раздел "Ваше первое приложение" на их веб-сайте.

Одна вещь, по которой у меня есть вопрос, это источник событий.

Родительский компонент ( список продуктов ):

<app-product-alerts
  [product]="product"
  (notify)="onNotify()">
</app-product-alerts>

Метод onNotify() просто вызывает предупреждение

Дочерний компонент ( product-alert ):

<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

Дочерний компонент ts:

...
export class ProductAlertsComponent implements OnInit {

  @Input() product;
  @Output() notify = new EventEmitter();

...

}

Мой вопрос: какой смысл использовать здесь излучатель? Дочерний компонент имеет только один элемент, а именно кнопку.

Почему мы не можем просто сделать следующее:

<app-product-alerts
  [product]="product"
  (click)="onNotify()">
</app-product-alerts>

Какова была цель введения здесь излучателя?

Не правильно ли прикреплять прослушиватели щелчков к дочерним компонентам?

Answer 1

EventEmitters являются субъектами (вы можете воспользоваться библиотекой Rx JS), вы можете передать логическое значение в качестве параметра, чтобы определить, будет ли связь синхронной или асинхронной по умолчанию, она синхронная. Я определил базовую c связь между дочерним компонентом и родительским компонентом, используя привязку событий.

Мой вопрос: какой смысл использовать здесь эмиттер? Дочерний компонент имеет только один элемент, а именно кнопку.

Смысл использования излучателя заключается в том, что вам необходимо установить sh дочерний -> родительский тип связи. Имея в дочернем элементе компонента 1 это не имеет большого значения, потому что вы могли бы определить определенный тип пользовательского поведения, в противном случае вы можете использовать эту кнопку в родительском элементе и использовать событие click, но дизайн компонента в Angular следует за Atomi. c Шаблон проектирования для компонентов, поэтому вы пытаетесь разделить компоненты как можно меньше.

Неправильно ли прикреплять прослушиватели щелчков к дочерним компонентам?

Первый вопрос, на который нужно ответить, это то, что вы пытаетесь выполнить с этим слушателем sh. Я бы сказал, что вам нужно взглянуть на базовый тип связи между компонентами в angular.

1. Передача ссылки одного компонента на другой

2. Связь через родительский компонент

3. Связь через службу

Когда вы поймете, как работает связь angular компонентов, вы Вы поймете, что слушатели могут быть не лучшим решением, и, как только вы поймете весь сценарий ios, вы сможете использовать лучший способ общения.

Кстати, слушатели очень помогают, если вы используете это с умом.

Удачи!

Answer 2

По умолчанию в Angular вы не можете прослушивать компонент щелчка, однако вы можете добавить прослушиватель хоста

export class ProductAlertsComponent implements OnInit {

@HostListener("click") onClick(){
    console.log("User Click using Host Listener")
}

Основная цель генератора событий - передавать данные из дочернего компонента в родительский компонент не только для слушатель событий