如何在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中获取父组件的父组件值。最好的办法是什么？

回答

相关问题