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

IT技术 javascript angular typescript components
2021-01-24 22:28:24

我有一个名为 search_detail 的组件,其中有另一个名为日历的组件,

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

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

4个回答

EventEmitter在您的子组件中将注册@Output

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

点击时发出value:

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

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

@SavanGadhiya 输入事件与其他事件没有什么不同。例如,您不必在元素上绑定 (click)=".." 事件,而是绑定 (input)=".." 事件,然后将该事件进一步发送到父组件。
2021-03-21 22:28:24
我的例子中的 pickDate 应该在点击时触发,再次,只是一个例子。使用适合您的用例的内容。
2021-04-06 22:28:24
只是一个示例值,演示将值从子组件传递到父组件。您可以传递任何您想要的值(开始日期、结束日期)。
2021-04-07 22:28:24
如何制作一个对象来组合这两个日期,例如: { startDate: startDate, endDate: endDate },并立即传递它,而不是引入两个发射器?
2021-04-07 22:28:24
如果你想从一个路由发射到它的父节点app.component怎么办?
2021-04-12 22:28:24

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

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

发出此事件:

this.eventName.emit(payloadDataObject);
这里不解释如何在父组件中监听。
2021-03-19 22:28:24

大多数新版本如果出现一些错误,请替换此行

@Output() parentComponent = new EventEmitter();

几乎可以解决你的错误

您好,您可以使用输入和输出。输入让您将可变形式的父级传递给子级。输出相同,但从孩子到父母。

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

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

通过这种方式,您可以直接在搜索页面中获得开始日期和结束日期。让我知道它是否有效,或者换一种方式思考。谢谢

问题是如何将数据从子组件传递到父组件。在您的示例中,您提到了输出和输入,但仅提供了一个用于父子通信的输入示例
2021-03-17 22:28:24
好的...在这种情况下,我认为唯一的方法是将日历中的事件绑定到搜索。当 startdate 和 enddate 被选中时,在搜索组件上触发此事件
2021-03-24 22:28:24