将数据从子组件传递到父组件Angular2

本文介绍了将数据从子组件传递到父组件Angular2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个名为search_detail的组件，其中包含另一个名为calendar的组件，

I have a component named search_detail which has another component inside it named 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_detailponent.html', moduleId: module.id })

Calendarponent.ts

import { Component, Input} from '@angular/core'; @Component({ moduleId:module.id, selector: 'calendar', templateUrl: './calendarponent.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点击搜索详细信息页面中的确定按钮。我该怎么办？

I want to access the startdate and enddate on click of the ok button in the search detail page. how can i do?

推荐答案

在您的子组件中注册 EventEmitter 作为 @Output ：

Register the EventEmitter in your child component as the @Output:

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

点击后发出价值：

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

收听父组件模板中的事件：

Listen for the events in your parent component's template:

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

并在父组件中：

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

在官方文档中也有很好的解释：组件互动。

It's also well explained in the official docs: Component interaction.