如何将子组件值获取到angular2中的父组件。最好的方法是什么？

我有子组件（日历）和父组件（表单）。我必须在日历中选择值，我想访问表单组件中的值

我如何以最好的方式实现这一点

子组件.ts：

导入{
组成部分，
奥尼特，
ViewChild，
输入
}从“@angular/core”开始；
@组成部分({
选择器：“日历”，
模板：'
',
})
导出类CalendarComponent实现OnInit{
今天：日期=新日期（）；
minDate：日期；
maxDate：日期；
构造函数（）{
}
恩戈尼尼特（）{
}
}

父组件：

导入{
组成部分，
奥尼特，
ViewChild，
输入
}从“@angular/core”开始；
从'@angular/Router'导入{Router}；
从'angular2 chartjs'导入{ChartModule，ChartComponent}；
从“/../shared/chart.service”导入{ChartService}；
从“/../shared/data”导入{Colors，xAxisWidth}；
@组成部分({
选择器：“form js”，
模板：`
参数选择表
`,
})
导出类FormComponent实现OnInit{
@输入fromDate:字符串；
@输入toDate:字符串；
构造函数（）{
}
恩戈尼尼特（）{
}
警报（起始日期）；
}

---

如何在angular2中的form component中获取起始日期和截止日期值？

如果您想在父组件中获取子组件的值，只需使用

@ViewChild

注释即可

像

---

然后您就可以访问组件的所有公共资源。

您可以使用@Output装饰器，这使得父组件和子组件之间的通信变得很容易

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

}

在父组件中：

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

}

@组件({
选择器：“form js”，
模板：`
参数选择表
`,
})
导出类FormComponent{
选择值（新值：任意）{
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} );
  }

}

导入{
组成部分，
奥尼特，
ViewChild，
输入，
输出//添加此导入
EventEmitter//也添加此导入
}从“@angular/core”开始；
@组成部分({
选择器：“日历”，
模板：'
',
})
导出类CalendarComponent实现OnInit{
//声明此EventListener以便在父组件中侦听它。
@Output（）onSelectValue=neweventemitter（）；
今天：日期=新日期（）；
minDate：日期；
maxDate：日期；
构造函数（）{
}
恩戈尼尼特（）{
}
onChange（）{
this.onSelectValue.emit（{minDate:this.minDate，maxDate:this.maxDate}）；
}
}

另一种解决方案：

子组件：

导入{
组成部分，
奥尼特，
ViewChild，
输入
}从“@angular/core”开始；
@组成部分({
选择器：“日历”，
模板：`
`,
})
导出类CalendarComponent实现OnInit{
minDate：日期；
maxDate：日期；
构造函数（）{
}
恩戈尼尼特（）{
}
}

您可以使用共享服务或@Input/@Output属性。后者在这种情况下是最好的，并且在Angular文档中有很好的记录：最好的方法是编写一个可注入服务来传递数据，因为提供的方法是用于自定义组件扫描父组件使用@ViewChild decorator在子组件中获取元素？这是一个错误的解决方案，您不能使用@ViewChild！从父组件访问子元素！！