如何在Angular中从子组件传递数据给父组件

Question

如何在Angular中从子组件传递数据给父组件

87

我有一个名为search_detail的组件，其中包含另一个名为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

})

日历组件.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();
      }
    }

当我在搜索详情页点击“确定”按钮时，我想访问开始日期和结束日期。我该怎么做？

- Sajeetharan

1

看一下 Angular2 中的 @Output()。 - Aravind

4个回答

1

为了从子组件发送数据，请在子组件中创建使用output()装饰的属性，并在父组件中监听创建的事件。每当需要时，使用新值在有效负载中发出此事件。

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

触发此事件：

this.eventName.emit(payloadDataObject);

- Saharis9988

13

这里你没有解释如何在父组件中进行监听。 - Lounis

0

大多数新版本，如果出现错误，请替换此行：

@Output() parentComponent = new EventEmitter();

这样就可以解决大部分问题了。

- user15870507

-4

你好，你可以利用输入和输出。输入让你从父组件向子组件传递变量。输出则相反，从子组件向父组件传递变量。

最简单的方法是将“开始日期”和“结束日期”作为输入传递。

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

这样你就可以在搜索页面直接获得开始日期和结束日期。如果有效，请告诉我，或者想另一种方法。谢谢

- Marco Castano

好的...在这种情况下，我认为唯一的方法是将日历上的事件绑定到搜索组件。当选择开始日期和结束日期时，在搜索组件上触发此事件。 - Marco Castano

2

问题是如何从子组件传递数据到父组件。在您的示例中，您提到了Output和Input，但只提供了一个Input的示例，这是用于父子通信的。 - Patricio Vargas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- seidme · Accepted Answer

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

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