Angular2:父子组件通信 [英] Angular2: Parent and Child Components Communication
本文介绍了Angular2:父子组件通信的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个父子组件,其中子组件的状态将下降.有人可以帮助我了解如何访问父组件中的状态下拉值吗?这是我的示例代码.
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>
在这里也很笨拙 http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info
推荐答案
我将在您的State
组件中定义一个输出,并使用它触发事件:
I would define an output into your State
component and triggers an event using it:
@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
包含新状态值的值.
修改
这是一种将选定状态保存在父组件中的方法:
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);
}
}
这篇关于Angular2:父子组件通信的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文