如何将数据从子组件传递到父组件Angular [英] How to Pass data from child to parent component Angular

问题描述

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

SearchDetail_component.html

 <li class="date"><div class="btn-group 下拉菜单" [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'">日期 <span class="caret"></span></按钮><ul class="下拉菜单默认下拉"><日历></日历><按钮>取消</按钮><按钮(点击)="setDate(类别)">确定</按钮></ul></div></li>

SearchDetail_component.ts

import 'rxjs/add/observable/fromEvent';@零件({选择器:'searchDetail'，templateUrl: './search_detail.component.html',模块ID:模块.id})

Calendar.component.ts

从'@angular/core'导入{组件，输入}；@零件({moduleId:module.id,选择器:'日历'，模板网址:'./calendar.component.html'})导出类 CalendarComponent{public fromDate:Date = new Date();私人 toDate:Date = new Date();私人事件:Array<any>;明天私人:日期；明天之后的私人:日期；私有格式:数组<字符串>= ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];私有格式 = this.formats[0];私人日期选项:任何 = {格式年:'YY'，开始日:1};私人打开:布尔=假；公共getDate():数字{返回 this.fromDate.getDate() ||新日期().getTime();}}

我想通过单击搜索详细信息页面中的确定按钮来访问开始日期和结束日期.我该怎么办?

解决方案

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

@Output() onDatePicked = new EventEmitter();

点击时发出值:

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

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

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

在父组件中:

public doSomething(date: any):void {console.log('选择日期:', 日期);}

官方文档中也有很好的解释:组件交互.

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

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

解决方案

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

@Output() onDatePicked = 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.

这篇关于如何将数据从子组件传递到父组件Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！