Javascript 将数据从子组件传递给父组件 Angular2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42107167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass data from child to parent component Angular2
提问by Sajeetharan
I have a component named search_detail which has another component inside it named calendar,
我有一个名为 search_detail 的组件，其中有另一个名为日历的组件，
SearchDetail_component.html
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
SearchDetail_component.ts
import 'rxjs/add/observable/fromEvent';
@Component({
selector: 'searchDetail',
templateUrl: './search_detail.component.html',
moduleId: module.id
})
Calendar.component.ts
日历.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();
}
}
I want to access the startdate and enddate on click of the ok button in the search detail page. how can i do?
我想通过单击搜索详细信息页面中的确定按钮来访问开始日期和结束日期。我能怎么做？
回答by Seid Mehmedovic
Register the EventEmitterin your child component as the @Output:
EventEmitter在您的子组件中将注册为@Output：
@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
Emit value on click:
点击时发出价值：
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>
and in the parent component:
并在父组件中：
public doSomething(date: any):void {
console.log('Picked date: ', date);
}
It's also well explained in the official docs: Component interaction.
在官方文档中也有很好的解释：组件交互。
回答by Saharis9988
In order to send data from child component create property decorated with output() in child component and in the parent listen to the created event. Emit this event with new values in the payload when ever it needed.
为了从子组件发送数据，在子组件和父组件中创建用 output() 修饰的属性，监听创建的事件。在需要时使用有效负载中的新值发出此事件。
@Output() public eventName:EventEmitter = new EventEmitter();
to emit this event:
发出此事件：
this.eventName.emit(payloadDataObject);
回答by Marco Castano
Hello you can make use of input and output. Input let you to pass variable form parent to child. Output the same but from child to parent.
您好，您可以使用输入和输出。输入让您将可变形式的父级传递给子级。输出相同，但从孩子到父母。
The easiest way is to pass "startdate" and "endDate" as input
最简单的方法是将“startdate”和“endDate”作为输入传递
<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar>
In this way you have your startdate and enddate directly in search page. Let me know if it works, or think another way. Thanks
通过这种方式，您可以直接在搜索页面中获得开始日期和结束日期。让我知道它是否有效，或者换一种方式思考。谢谢
