父组件:
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');
}
}