dane przechodzą z dzieckiem do elementu nadrzędnego Angular2

Question

Mam komponent o nazwie search_detail który ma inny składnik wewnątrz nazwany kalendarz,

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

Chcę otworzyć StartDate i EndDate na kliknięcie przycisku OK w wyszukiwaniu szczegółów. jak mogę zrobić?

Answer 1

Zarejestruj EventEmitter w swoim składniku dziecka jako @Output:

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

wartość Emit na kliknięcia:

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

Posłuchaj dla wydarzeń w szablonie rodzica komponentu:

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

oraz w wartości nominalnej ent komponent:

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

Jest również dobrze wyjaśnione w oficjalnych dokumentów: Component interaction.

Answer 2

Witaj, możesz skorzystać z wejścia i wyjścia. Dane wejściowe umożliwiają przekazanie rodzicowi zmiennej postaci do elementu potomnego. Wypisz to samo, ale z potomka na rodzica.

Najprostszym sposobem jest przekazanie „StartDate” i „endDate” jako wejście

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

W ten sposób masz StartDate i endDate bezpośrednio na stronie wyszukiwania. Daj mi znać, jeśli to działa, lub pomyśl inaczej. Dzięki