Angular2:父子组件通信 [英] Angular2: Parent and Child Components Communication
问题描述
我正在尝试创建一个父组件和子组件,其中子组件将有一个状态下拉列表.有人可以帮助我了解如何访问父组件中的状态下拉值吗?这是我的示例代码.
/app/app.ts从 'angular2/core' 导入 {Component}从angular2/common"导入 {FORM_DIRECTIVES、FormBuilder、ControlGroup、Validators}从 './state' 导入 {State}@成分({选择器:'我的应用',提供者:[FormBuilder],templateUrl: 'app/app.html',指令:[状态]})出口类应用{注册表:ControlGroup;状态:状态;构造函数(FB:FormBuilder){this.registrationForm = fb.group({'name': ['', Validators.required],'电子邮件': ''});}提交(){alert('输入名称:' + this.registrationForm.value.name);alert('状态选择:');//试图提醒状态组件中选择的状态}}/app/app.html<div><h2>注册表</h2><form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()"><标签>名称:</label><input type="text" ngControl="name"><状态></状态><button [disabled]="!registrationForm.valid">提交</button></表单>
/app/state.ts从 'angular2/core' 导入 {Component}从angular2/common"导入 {FORM_DIRECTIVES, FormBuilder, ControlGroup}@成分({选择器:'状态',提供者:[FormBuilder],templateUrl: 'app/state.html',指令:[]})出口类状态{statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];状态形式:控制组构造函数(FB:FormBuilder){this.stateForm = fb.group({'状态': ''});}设置状态值(){警报('状态选择:' + this.stateForm.value.state);}}/app/state.html<div><form [ngFormModel]="stateForm"><label>状态:</label><select ngControl="state" (change)="setStateValue()"><option *ngFor="#s of statesDropDownValues"[value]="s">{{s}}</选项></选择></表单>
也在这里http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info
我会在你的 State
组件中定义一个输出并使用它触发一个事件:
@Component({选择器:'状态',提供者:[FormBuilder],templateUrl: 'app/state.html',指令:[]})出口类状态{statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];stateForm:控制组;@输出()stateChange:EventEmitter= new EventEmitter();//<----构造函数(FB:FormBuilder){this.stateForm = fb.group({'状态': ''});}设置状态值(){警报('状态选择:' + this.stateForm.value.state);stateChange.emit(this.stateForm.value.state);}}
父组件可以在此事件上注册以收到更改通知:
<h2>注册表</h2><form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()"><标签>名称:</label><input type="text" ngControl="name"><state(stateChange)="handleNewState($event)"></state><button [disabled]="!registrationForm.valid">提交</button></表单>
$event
包含新状态值的值.
编辑
这里有一种在父组件中保存选中状态的方法:
导出类 App {注册表:ControlGroup;状态:字符串;构造函数(FB:FormBuilder){this.registrationForm = fb.group({'name': ['', Validators.required],'电子邮件': ''});}处理新状态(状态){this.state = 状态;}提交(){alert('输入名称:' + this.registrationForm.value.name);alert('选择的状态:' + this.state);}}
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
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
contains the value of the new state value.
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);
}
}
这篇关于Angular2:父子组件通信的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!