angle2の親コンポーネントに子コンポーネントの値を取得する方法。最善のアプローチは何ですか？

Question

私は子コンポーネント（カレンダー）と親コンポーネント（フォーム）を持っています。私はカレンダーで値の値を選択する必要があり、私はフォームコンポーネントの値にアクセスしたい。

これを可能な限り最良の方法で達成するにはどうすればよいですか？

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

私からとに達成することができますどのようにangle2のフォームコンポーネントの日付値？

Answer 1

親コンポーネントの子コンポーネントの値を取得する場合は、単に@ViewChildアノテーションを使用します。

@ViewChild('minDateControl') calendar: Md2Datepicker; 

よう

次に、あなたは、コンポーネントのすべてのパブリックリソースへのアクセスを持っています。

あなたが親コンポーネントに親コンポーネントと子コンポーネント

間の通信を容易にします@outputデコレータ、使用することができます

Answer 2

：子コンポーネント

に

@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 to 
} 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 3

実際には、このcookbookのangular.ioウェブサイトに詳細が記載されています。 Component Interaction

私の個人的なお気に入りは、親子通信のためのサービスを使用することですが、もちろんそれは状況によって異なります。

Answer 4

別の解決策：

チャイルドコンポーネント：

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プロパティにアクセスできます。