Angular2: связь родительских и дочерних компонентов

Question

Я пытаюсь создать родительский и дочерний компонент, где у дочернего компонента будут выпадающие состояния. Может кто-нибудь помочь мне понять, как я могу получить доступ к раскрывающемуся значению состояний в родительском компоненте? Вот мой пример кода.

/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, FormBuilder, ControlGroup} from 'angular2/common'

@Component({
  selector: 'state',
  providers: [FormBuilder],
  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

Answer 1

Я бы определил вывод в ваш State компонент и запускает событие, используя его:

@Component({
  selector: 'state',
  providers: [FormBuilder],
  templateUrl: 'app/state.html',
  directives: []
})
export class State {
  statesDropDownValues = ['NJ', 'NY', 'PA', '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>

$event содержит значение нового значения состояния.

редактировать

Вот способ сохранить выбранное состояние в родительском компоненте:

export class App {
  registrationForm: ControlGroup;

  state: string;

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

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

  onSubmit() {
    alert('Entered Name: ' + this.registrationForm.value.name);
    alert('State Selected: ' + this.state);
  }
}

Answer 2

С помощью output а также emit Вы можете легко получить доступ к дочерним данным в родительском компоненте. Например

import { Component,Input,Output,EventEmitter  } from '@angular/core';

@Component({
  selector: 'child-component',
  template: '<div>'
      +'<span>Child Component: </span>'
      +'<span>{{name}}</span>'
      +'<button (click)="shareData()">Share data to parent</button>'
    +'</div>',
  styleUrls: ['./app.component.css']
})
export class ChildComponent {

 @Input() name: string;
 @Output() shareDataToParent = new EventEmitter();

 title : string;
 constructor(){
     this.title = 'Sharing from child to parent';
 }

 shareData(){
     this.shareDataToParent.emit(this.title);
 }
}

<child-component name="Angular" (shareDataToParent) = shareDataToParent($event)>
</child-component>

Родительский компонент

shareDataToParent(sharedText:string){
  console.log(sharedText);
}

Больше информации о детском родительском общении