Angular2：父子组件通信

我正在尝试创建一个父子组件,其中子组件将有一个状态下拉.有人可以帮我理解如何访问父组件中的状态下拉值吗？这是我的示例代码.

/app/app.ts

import {Component} from 'angular2/core'
import {FORM_DIRECTIVES,FormBuilder,ControlGroup,Validators} from 'angular2/common'
import {StatE} from './state'

@Component({
  SELEctor: 'my-app',providers: [FormBuilder],templateUrl: 'app/app.html',directives: [State]
})

export class App {
  registrationForm: ControlGroup;

  state: State;

  constructor(fb: FormBuilder) {

    this.registrationForm = fb.group({
      'name': ['',Validators.required],'email': ''
    });
  }

  onSubmit() {
    alert('Entered Name: ' + this.registrationForm.value.Name);
    alert('State SELEcted: '); //trying to alert the state SELEcted in state component
  }
}

/app/app.html

<div>
  <h2>Registration Form</h2>
  <form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()">
    <label>Name: </label>
    <input type="text" ngControl="name">
    <state></state>
    <button [disabled]="!registrationForm.valid">Submit</button>
  </form>
</div>

/app/state.ts
import {Component} from 'angular2/core'
import {FORM_DIRECTIVES,ControlGroup} from 'angular2/common'

@Component({
  SELEctor: 'state',templateUrl: 'app/state.html',directives: []
})

export class State {

  statesDropDownValues = ['NJ','NY','PA','CA'];

  stateForm: ControlGroup

  constructor(fb: FormBuilder) {
    this.stateForm = fb.group({
      'state': ''
    });

  }

  setStateValue() {
    alert('State SELEcted: ' + this.stateForm.value.statE);
  }
}

/app/state.html
<div>
  <form [ngFormModel]="stateForm">
    <label>State: </label>
    <SELEct ngControl="state" (changE)="setStateValue()">
      <option *ngFor="#s of statesDropDownValues"
          [value]="s">{{s}}
      </option>
    </SELEct>
  </form>
</div>

也是这里的龙头http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info

@Component({
  SELEctor: 'state',directives: []
})
export class State {
  statesDropDownValues = ['NJ','CA'];
  stateForm: ControlGroup;
  @Output()
  stateChange:EventEmitter<String> = new EventEmitter(); // <----

  constructor(fb: FormBuilder) {
    this.stateForm = fb.group({
      'state': ''
    });
  }

  setStateValue() {
    alert('State SELEcted: ' + this.stateForm.value.statE);
    stateChange.emit(this.stateForm.value.statE);
  }
}

<div>
  <h2>Registration Form</h2>
  <form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()">
    <label>Name: </label>
    <input type="text" ngControl="name">
    <state (stateChangE)="handleNewState($event)"></state>
    <button [disabled]="!registrationForm.valid">Submit</button>
  </form>
</div>

export class App {
  registrationForm: ControlGroup;

  state: String;

  constructor(fb: FormBuilder) {
    this.registrationForm = fb.group({
      'name': ['','email': ''
    });
  }

  handleNewState(statE) {
    this.state = state;
  }

  onSubmit() {
    alert('Entered Name: ' + this.registrationForm.value.Name);
    alert('State SELEcted: ' + this.statE);
  }
}