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

发布时间：2020-12-17 07:18:07 所属栏目：安全来源：网络整理

导读：Angular 2中的变化事件是什么？什么时候发送,我该如何使用它？ I. e.通过(change)=“update()”在以下代码中订阅了什么？ http://plnkr.co/edit/mfoToOSLU6IU2zr0A8OB?p=preview import {Component,View,Input,Output,EventEmitter,OnChanges} from '@angula

Angular 2中的变化事件是什么？什么时候发送,我该如何使用它？
I. e.通过(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：Same question in Russian.

这是冒泡的事件：输入发生变化,然后是dom树的气泡,并在内部组件元素上处理.可以通过记录事件来检查：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!