# Angular 2中主从组件的相互通信

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
Main Component
    
Data from Main Component: {{ mainData }}
    
  `,
})
export class AppComponent {
  mainData = 'Hello from Main Component';
  updateData(newData: string) {
    this.mainData = newData;
  }
}

typescript
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    
      
Child Component
      
Data from Main Component in Child Component: {{ childData }}
      Change Data
    
  `,
})
export class ChildComponent {
  @Input() childData: string;
  @Output() onDataChange = new EventEmitter();
  changeData() {
    const newData = 'New Data from Child Component';
    this.onDataChange.emit(newData);
  }
}