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

Question

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

我怎样才能以最佳方式实现这一目标？

儿童组件：

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中的form组件中实现from和date的值？

Answer 1

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

在父组件中：

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

}

Answer 2

另一种方案：

子组件：

 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"></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 { minDate: Date; maxDate: Date; constructor(){ } ngOnInit(){ } } 

父组件：

 import { Component, OnInit, ViewChild, Input, ElementRef } 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 #test></calendar> <button (click)="showAlert();"></button> `, }) export class FormComponent implements OnInit { @ViewChild('test') calendar; constructor(){ } ngOnInit(){ } showAlert(){ alert(this.calendar.minDate); } } 

现在我可以在showAlert（）方法中访问ngModel属性

Answer 3

如果要在父组件中获取子组件的值，只需使用@ViewChild注释即可。

喜欢

@ViewChild('minDateControl') calendar: Md2Datepicker;

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

Answer 4

实际上有很多选项，都在angular.io网站上的这本食谱中详细说明： 组件交互

我个人最喜欢的是使用服务进行亲子沟通，但当然这取决于具体情况。