如何将数据从子组件传递到父组件Angular

新手上路,请多包涵

我有一个名为 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 514
1 个回答

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

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

原文由 seidme 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题