[英]Angular2: Parent and Child Components Communication
I'm trying to create a parent and child component where the child component is going to have a states drop down.我正在尝试创建一个父组件和子组件,其中子组件将有一个状态下拉列表。 Can someone help me understand how I can access the states drop down value in Parent Component?
有人可以帮助我了解如何访问父组件中的状态下拉值吗? Here is my sample code.
这是我的示例代码。
/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>
Also plunker here http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info在这里也plunker http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info
I would define an output into your State
component and triggers an event using it:我会在你的
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);
}
}
The parent component can register on this event to be notified of changes:父组件可以在此事件上注册以收到更改通知:
<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
contains the value of the new state value. $event
包含新状态值的值。
Edit编辑
Here is a way to save the selected state in the parent component:下面是一种在父组件中保存选中状态的方法:
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);
}
}
Using output
and emit
you can easily access child data in parent component.使用
output
和emit
您可以轻松访问父组件中的子数据。 For example例如
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>
Parent component父组件
shareDataToParent(sharedText:string){
console.log(sharedText);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.