如何在angular2中将子组件值获取到父组件.最好的方法是什么? [英] How to get child component value to parent component in angular2. what is the best approach?
本文介绍了如何在angular2中将子组件值获取到父组件.最好的方法是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有子组件(日历)和父组件(窗体).我必须在日历中选择值,并且要访问表单组件中的值.
I have child component (calendar) and parent component (form). I have to select value in calendar and I want to access value in form component.
如何以最佳方式实现这一目标?
How can I achieve this in best possible way?
子Component.ts:
Child Component.ts:
import {
Component,
OnInit,
ViewChild,
Input
} from '@angular/core';
@Component({
selector: 'calendar',
template: '
<md2-datepicker name="mindate"
placeholder="Minimum Date"
[(ngModel)]="minDate"
[mode]="mode"
[touchUi]="touch"
[format]="dateFormat"
#minDateControl="ngModel" [fromDate]="minDateControl"></md2-datepicker>
<md2-datepicker name="maxdate"
placeholder="Maximum Date"
[(ngModel)]="maxDate"
[min]="minDate"
[mode]="mode"
[touchUi]="touch"
[format]="dateFormat"
#maxDateControl="ngModel"></md2-datepicker>
',
})
export class CalendarComponent implements OnInit {
today: Date = new Date();
minDate: Date;
maxDate: Date;
constructor(){
}
ngOnInit(){
}
}
父组件:
import {
Component,
OnInit,
ViewChild,
Input
} from '@angular/core';
import { Router } from '@angular/router';
import { ChartModule,ChartComponent } from 'angular2-chartjs';
import { ChartService } from './../shared/chart.service';
import { Colors, xAxisWidth } from './../shared/data';
@Component({
selector: 'form-js',
template: `
<h3 class="chartHeading">Parameter Selection Form</h3>
<calendar></calendar>
`,
})
export class FormComponent implements OnInit {
@Input fromDate: string;
@Input toDate: string;
constructor(){
}
ngOnInit(){
}
alert(fromDate);
}
如何获取和更新angular2表单组件中的值?
How can I achieve from and to date values in form component in angular2?
推荐答案
,您可以使用 @Output 装饰器,这样可以轻松在父组件和子组件之间进行通信
you can use the @Output decorator, which makes it easy to communicate between the Parent component and the Child component
在父组件中:
@Component({
selector: 'form-js',
template: `
<h3 class="chartHeading">Parameter Selection Form</h3>
<calendar (onSelectValue)='selectValue($event)'></calendar>
`,
})
export class FormComponent{
selectValue( newValue : any ) {
console.log(newValue);
}
}
在子组件中
import {
Component,
OnInit,
ViewChild,
Input,
Output // add this import
EventEmitter // add this import as well
} from '@angular/core';
@Component({
selector: 'calendar',
template: '
<md2-datepicker name="mindate"
placeholder="Minimum Date"
[(ngModel)]="minDate"
[mode]="mode"
(change)='onChange()' // add this event listener
[touchUi]="touch"
[format]="dateFormat"
#minDateControl="ngModel" [fromDate]="minDateControl"></md2-datepicker>
<md2-datepicker name="maxdate"
placeholder="Maximum Date"
[(ngModel)]="maxDate"
[min]="minDate"
(change)='onChange()' //add this event listener
[mode]="mode"
[touchUi]="touch"
[format]="dateFormat"
#maxDateControl="ngModel"></md2-datepicker>
',
})
export class CalendarComponent implements OnInit {
//declare this EventListener in order to listen on it in the parent component.
@Output() onSelectValue = new EventEmitter<{minDate: Date , maxDate: Date}>();
today: Date = new Date();
minDate: Date;
maxDate: Date;
constructor(){
}
ngOnInit(){
}
onChange() {
this.onSelectValue.emit( {minDate: this.minDate, maxDate:this.maxDate} );
}
}
这篇关于如何在angular2中将子组件值获取到父组件.最好的方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文