Angular2 组件间通过@Input @Output通讯示例

 @Input() title:string;
 _name:string = '';

 @Input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }

<app-header [title]="title" name="姓名"></app-header>

export class HeaderComponent implements OnChanges {
 ngOnChanges(changes: SimpleChanges): void {
  console.log(changes['title']);
 }
 @Input() title:string;
 _name:string = '';

 @Input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }

}

export class HeaderComponent implements OnChanges {
 ngOnChanges(changes: SimpleChanges): void {
  console.log(changes['title']);
 }
 @Input() title:string;
 _name:string = '';

 @Input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }
 //声明事件发射器
 @Output() checkEmitter=new EventEmitter<boolean>();
 //用于绑定checkbox的checked属性
 isChecked=true;

 toggle() {
  this.isChecked=!this.isChecked;
  //发射事件
  this.checkEmitter.emit(this.isChecked);
 }
}

<p>
 {{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>

export class AppComponent implements AfterViewInit{
 ngAfterViewInit() {

 }
 onCheckedChange(isChecked:boolean) {
  console.log("checkbox选中状态："+isChecked);
 }
}