最近一直在琢磨angular2,几下一点笔记。

父组件:

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


评论

暂无评论

您的观点