передать данные от ребенка до родительского компонента Angular2

Question

У меня есть компонент под названием search_detail, который имеет другой компонент внутри него назван календарь,

SearchDetail_component.html

<li class="date"> 
    <div class="btn-group dropdown" [class.open]="DatedropdownOpened"> 
    <button type="button" (click)="DatedropdownOpened = !DatedropdownOpened" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
aria-haspopup="true" [attr.aria-expanded]="dropdownOpened ? 'true': 'false'"> 
     Date <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu default-dropdown"> 
    <calendar ></calendar> 
    <button > Cancel </button> 
    <button (click)="setDate(category)"> Ok </button> 
    </ul>        
</div> 
</li> 

SearchDetail_component.ts

import 'rxjs/add/observable/fromEvent'; 
@Component({ 
    selector: 'searchDetail', 
    templateUrl: './search_detail.component.html', 
    moduleId: module.id 

}) 

Calendar.co mponent.ts

import { Component, Input} from '@angular/core'; 
@Component({ 
    moduleId:module.id, 
    selector: 'calendar', 
    templateUrl: './calendar.component.html' 
}) 

    export class CalendarComponent{ 
     public fromDate:Date = new Date();  
     private toDate:Date = new Date(); 
     private events:Array<any>; 
     private tomorrow:Date; 
     private afterTomorrow:Date; 
     private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate']; 
     private format = this.formats[0]; 
     private dateOptions:any = { 
     formatYear: 'YY', 
     startingDay: 1 
     }; 
     private opened:boolean = false; 

     public getDate():number { 
     return this.fromDate.getDate() || new Date().getTime(); 
     } 
    } 

Я хочу, чтобы получить доступ к StartDate и ENDDATE по нажатию кнопки ОК на странице поиска деталей. Как я могу сделать?

Answer 1

Зарегистрируйте EventEmitter в вашем детском компоненте как @Output:

@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>(); 

значение Emit по щелчку:

public pickDate(date: any): void { 
    this.onDatePicked.emit(date); 
} 

Прислушайтесь событий в шаблоне вашего родительского компонента:

<div> 
    <calendar (onDatePicked)="doSomething($event)"></calendar> 
</div> 

и в номинальной лор компонент:

public doSomething(date: any):void { 
    console.log('Picked date: ', date); 
} 

Это также хорошо объясняется в официальных документах: Component interaction.

Answer 2

Здравствуйте, вы можете использовать вход и выход. Ввод позволяет передавать родительскую форму переменной родительской. Выведите то же самое, но от дочернего к родительскому.

Самый простой способ передать «StartDate» и «ENDDATE» в качестве входных данных

<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar> 

В этом случае у вас есть свой StartDate и ENDDATE непосредственно в страницу поиска. Сообщите мне, если это работает, или подумайте по-другому. Благодаря