如何将数据从子元件传递到父元件角度

我有一个名为 search _ Details 的组件，其中包含另一个名为 endar 的组件,

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


})

日历组件

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

我想访问起始日期和结束日期的确定按钮点击搜索详细信息页面。我该怎么办？

167596 次浏览
小开

您好，您可以使用输入和输出。 Input 允许您将变量表单的父级传递给子级。输出与从子级传递给父级相同。

最简单的方法是传递“ startdate”和“ endDate”作为输入

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

通过这种方式，您可以在搜索页面中直接显示您的起始日期和结束日期。 如果有用就告诉我，或者换个思路。 谢谢

小开
最佳答案

将子组件中的 EventEmitter注册为 @Output:

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

在点击时输出值:

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

侦听父组件模板中的事件:

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

以及父组件:

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

官方文件 组件交互也对此做了很好的解释。

小开

为了从子组件发送数据，在子组件和父组件中用 output ()修饰的 create 属性将侦听创建的事件。当需要时，在负载中使用新值发出此事件。

@Output() public eventName:EventEmitter = new EventEmitter();

发射这个事件:

this.eventName.emit(payloadDataObject);
小开

大部分新版本如果出现一些错误请更换此行

@ Output () ParentComponent = new EventEmitter () ;

几乎可以解决你的错误


提交答案