Что такое событие `change` в Angular 2

Что такоеchange событие в Angular 2? Когда оно отправляется и как я могу его использовать?
И. е. что я подписался в следующем коде через(change)="update()"?

http://plnkr.co/edit/mfoToOSLU6IU2zr0A8OB?p=preview

import {Component, View, Input, Output, EventEmitter, OnChanges} from '@angular/core'

@Component({
  selector: 'inner-component',
  template: `
    <label><input type="checkbox" [(ngModel)]="data.isSelected"> Selected</label>
  `
})
export class InnerComponent {
  data = { isSelected: false };
}

@Component({
  selector: 'my-app',
  template: `
    <p><inner-component (change)="update()"></inner-component></p>
    <p>The component was updated {{count}} times</p>
  `,
  directives: [InnerComponent]
})
export class AppComponent {
  count = 0;

  update() {
    ++this.count;
  }
}

PS:Тот же вопрос на русском.

 maxisam06 июл. 2016 г., 18:22
Я так удивлен, что это работает. По ощущениям жучок от угловой.

Ответы на вопрос(3)

Решение Вопроса

Это событие пузырится:change происходит наinput, а затем пузыри дом дерево и обрабатываетсяinner-component элемент. Это можно проверить, зарегистрировав событие:

http://plnkr.co/edit/J8pRg3ow41PAqdMteKwg?p=preview

@Component({
  selector: 'my-app',
  template: `
    <p><inner-component (change)="update($event)"></inner-component></p>
    <p>The component was updated {{count}} times</p>
  `,
  directives: [InnerComponent]
})
export class AppComponent {
  count = 0;

  update($event) {
    console.log($event, $event.target, $event.currentTarget);
    ++this.count;
  }
}
 maxisam06 июл. 2016 г., 19:23
Таким образом, мы можем использовать (изменить) где угодно. Это действительно удивляет меня.

change событие уведомляет вас об изменениях, происходящих в поле ввода. Поскольку ваш внутренний компонент не является нативным компонентом Angular, вы должны указать источник событий самостоятельно:

@Component({
  selector: 'inner-component',
  template: `
    <label><input type="checkbox" (change)="inputChange.emit($event)" [(ngModel)]="data.isSelected"> Selected</label>
  `
})
export class InnerComponent {
  @Output('change') inputChange = new EventEmitter();

  data = { isSelected: false };
}

И в вашем AppComponent вы теперь получаете события:

@Component({
  selector: 'my-app',
  template: `
    <p><inner-component (change)="update($event)"></inner-component></p>
    <p>The component was updated {{count}} times</p>
  `,
  directives: [InnerComponent]
})
export class AppComponent {
  count = 0;

  update(event: any) {
    ++this.count;
    console.log(event);
  }
}
 Qwertiy06 июл. 2016 г., 18:30
Я нашел причину. Спасибо за рабочий код с(change) на входе - в моей первоначальной версии это не сработало, потому что я назвал EventEmitter какchange.
 Qwertiy06 июл. 2016 г., 17:54
Мой код является за работой. Если вы откроете plunker, вы увидите увеличение количества изменений после установки флажка. Ввы код change называетсядважды на каждом флажке нажмите.

Это просто источник событий. Например, если вы посмотрите на угловой дизайн матисходный код заmat-select вы можете видеть, но в этом случае,selectionChange

@Output() readonly selectionChange: EventEmitter<MatSelectChange> =
      new EventEmitter<MatSelectChange>();

Ваш ответ на вопрос