Почему срабатывает EventEmitter?

Question

[zlodiak]

Помогите пожалуйста понять суть работы EventEmitter. Вот классический пример его работы. Здесь явно видно, что в компоненте color-picker по клику происходит излучение события:
this.selectedColorChange.emit(color);

Далее в шаблоне компонента app происходит принятие этого события:

<app-color-picker 
  [colors]="['#f00', '#ff0', '#a00']" 
  (selectedColorChange)="change($event)"
  [(selectedColor)]="color">
</app-color-picker>

И далее вызов функции:

change(color) {
    alert('change' + color);
  }

В результате значение color проброшено из color-picker.component в app.component. Это всё понятно и правильно.

Но в таком примере проброс того же значения происходит без:
(selectedColorChange)="change($event)"

Мне этот механизм не понятен. Как это можно понять, это документированная возможность? и хорошо ли пользоваться ей?

Answer 1

[0xD34F]

Мне этот механизм не понятен.

Обработка события selectedColorChange осуществляется автоматически - поскольку задана двусторонняя привязка для свойства selectedColor.

Как это можно понять, это документированная возможность?

Документированная.

Comments

[zlodiak]

Но ведь нет ничего общего у selectedColorChange и selectedColor. На чём основан этот автоматизм?

Компонент app даже не знает о существовании selectedColorChange... Следовательно когда тот что-то излучает, то изменения никак не должны коснуться компонента app

[0xD34F]

zlodiak, что значит ничего общего, вы документацию по ссылке читали? Если есть свойство xxx, то при двусторонней привязке будет обрабатываться событие xxxChange, если имя свойства yyy - то имя события yyyChange.