javascript - pasar - Pase los datos del componente hijo al principal Angular2

pasar parametros entre componentes angular 4

Question

Tengo un componente llamado search_detail que tiene otro componente dentro de él llamado 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

})

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

Quiero acceder a la fecha de inicio y finalización al hacer clic en el botón Aceptar en la página de detalles de búsqueda. ¿Como lo puedo hacer?

Answer 1

Hola puedes hacer uso de entrada y salida. La entrada le permite pasar de forma variable de padre a hijo. Salida igual pero de niño a padre.

La forma más fácil es pasar "startdate" y "endDate" como entrada

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

De esta manera, tiene su fecha de inicio y su fecha de finalización directamente en la página de búsqueda. Déjame saber si funciona, o pensar de otra manera. Gracias

Answer 2

Registre el EventEmitter en su componente hijo como @Output :

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

Emitir valor al hacer clic:

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

Escuche los eventos en la plantilla de su componente principal:

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

y en el componente padre:

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

También está bien explicado en los documentos oficiales: Interacción de componentes .