父组件:
import { Component,EventEmitter } from '@angular/core'; @Component({ selector: 'parentNode', template: `<h3 (click)="add()">{{bindingData}}</h3><childNode [(inputData)]='bindingData' (inputDataChange)='inputDataChange($event)'></childNode>` }) export class parentComponent { public bindingData:String = 'default text'; private _counter:number = 0; public inputDataChange(evt:EventEmitter<string>):void { console.log('child change data'); } add():void { this._counter ++; this._bindingData = String(this._counter) + this._bindingData; } }
子组件
import { Component,Input,Output,EventEmitter,OnChanges } from '@angular/core'; @Component({ selector : 'childNode', template : '<p (click)="add()">child:{{inputData}}</p>' }) export class childComponent implements OnChanges { private _counter:number = 0; @Input('inputData')inputData:String; @Output('inputDataChange')changeEvent:EventEmitter<string> = new EventEmitter(); add():void { this._counter++; this.inputData += String(this._counter); this.changeEvent.emit(this.inputData); } ngOnChanges():void { console.log('parent change data'); } }