什么是Angular 2中的`change`事件

问题描述

什么是Angular 2中的change事件?它何时分发?如何使用?
IE.我通过(change)="update()"在以下代码中订阅了什么?

What is change event in Angular 2? When is it dispatched and how can I use it?
I. e. what have I subscribed in following code via (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:俄语中的相同问题.

推荐答案

这是事件冒泡:change发生在input上，然后由dom树冒泡并在inner-component元素上得到处理.可以通过记录事件进行检查:

That's event bubbling: change occures on input, then bubbles by dom tree and gets handled on inner-component element. It can be checked by logging an event:

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;
  }
}

这篇关于什么是Angular 2中的`change`事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！