Tengo un componente llamado search_detail que tiene otro componente dentro llamado calendar,
Detalle_búsqueda_componente.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 la fecha de finalización al hacer clic en el botón Aceptar en la página de detalles de búsqueda. ¿Como lo puedo hacer?
Registre el EventEmitter en su componente secundario como @Output :
@Output() onDatePicked = 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 .
Para enviar datos desde el componente secundario, cree una propiedad decorada con salida () en el componente secundario y en el principal, escuche el evento creado. Emita este evento con nuevos valores en la carga útil cuando sea necesario.
@Output() public eventName:EventEmitter = new EventEmitter();para emitir este evento:
this.eventName.emit(payloadDataObject);La mayor parte de la nueva versión Si da algún error, reemplace esta línea
@Output() parentComponent = new EventEmitter();
Casi se solucionará tu error.