Передача данных от дочернего компонента к родительскому компоненту Angular2

У меня есть компонент search_detail, внутри которого есть еще один компонент calendar,

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

})

Календарь.компонент.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();
      }
    }

Я хочу получить доступ к дате начала и дате окончания при нажатии кнопки ok на странице детализации поиска. как это сделать?

Seid Mehmedovic
Редактировал вопрос 12-го сентября 2017 в 4:44
Программирование
javascript components angular typescript
8-го февраля 2017 в 7:31
23 просмотров
Комментарии к вопросу (1)
Решение

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

@Output() onDatePicked: EventEmitter = new EventEmitter();

Выдавать значение при нажатии:

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

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

<div>

</div>

и в родительском компоненте:

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

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

Seid Mehmedovic
Редактировал ответ 13-го февраля 2017 в 12:25
Комментарии (7)

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

Самый простой способ - передать "начальную дату" и "конечную дату" в качестве входных данных.

Таким образом, вы будете иметь дату начала и дату окончания непосредственно на странице поиска. Дайте мне знать, если это работает, или подумайте о другом способе. Спасибо

Комментарии (2)