如何在angular2中獲取父組件的父組件值。最好的辦法是什麼？

我有孩子組件（日曆）和父組件（表單）。我必須在日曆中選擇值的值，我想訪問表單組件中的值。如何在angular2中獲取父組件的父組件值。最好的辦法是什麼？

我如何以最佳方式實現這一目標？

兒童Component.ts：如何從並實現

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

：

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(){ 
 

 
    } 
 

 
}

父組件form2中的日期值在angular2中？

來源

2017-08-08 VSK

您可以使用共享服務或@ Input/@ Output屬性。後者在這種情況下是最好的，並且在Angular文檔中有詳細記錄：https：// angular。io/guide/component-interaction –

最好的方法是編寫一個可注入的服務來傳遞數據，方法是提供自定義組件的方式 – mast3rd3mon

如果您想要獲得父組件中的子組件的值，您可以簡單地使用@ViewChild註釋。

像

@ViewChild('minDateControl') calendar: Md2Datepicker;

然後，你可以訪問組件的所有公共資源。

來源

2017-08-08 08:37:01 Peter777

Parent組件可以使用@ViewChild裝飾器獲取子組件中的元素嗎？ –

這是一個錯誤的解決方案，您無法使用@ViewChild從父組件訪問子元素！ –

這不起作用 – VSK

可以使用@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 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}); 
    } 

}

來源

2017-08-08 08:40:39

實際上有一堆選項，都在angular.io網站上的這本食譜中詳細說明： Component Interaction

我個人最喜歡的是使用父母 - 孩子溝通的服務，但當然這取決於情況。

來源

2017-08-08 09:14:12

另一種解決方案：

輔元件：

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屬性

來源

2017-08-08 09:16:31 VSK

如何在angular2中獲取父組件的父組件值。最好的辦法是什麼？

回答

相關問題