Angular2：親と子コンポーネントの通信

Question

子コンポーネントが状態ドロップダウンを持つ親と子コンポーネントを作成しようとしています。誰かが、親コンポーネントの状態ドロップダウン値にどのようにアクセスできるかを理解するのに役立つことができますか？ここに私のサンプルコードです。

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

親コンポーネントがが通知されるように、このイベントに登録することができます

/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> 

また、私はあなたのStateコンポーネントに出力を定義し、それを使用してイベントをトリガしますここhttp://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info

Answer 1

をplunker変更：

<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には、新しい状態値の値が格納されます。あなたは簡単に親コンポーネントに子データにアクセスすることができemitoutputを使用

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

と：ここ

編集

は、親コンポーネントで選択された状態を保存する方法です。例えば

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

More info on child parent communication